CSS水平居中和垂直居中
行内元素居中
水平居中
1.给父元素设置text-align:center
<div style="text-align: center">
<span>行内元素span居中</span>
</div>2.flex布局
设置父元素display:flex;justify-content:center;
<div style="display:flex;justify-content:center;">
<span>行内元素span居中</span>
</div>垂直居中
1.父元素高度确定的单行文本(行内元素),可设置line-height等于父元素高度
<div style="height: 100px;">
<span style="line-height: 100px;">坦克</span>
</div>2.父元素高度确定的多行文本(行内元素)
方法一:使用插入 table (包括tbody、tr、td)标签,同时设置 vertical-align：middle( td 标签默认情况下就默认设置了 vertical-align 为 middle，所以我们不需要显式地设置了。)
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>父元素高度确定的多行文本</title>
<style>
.wrap {
height: 300px;
background: #ccc
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td class="wrap">
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td class="wrap">
<div>
<img src="" title="图片"/>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>方法二:设置块级元素的 display 为 table-cell（设置为表格单元显示），激活 vertical-align 属性
<div class="container" style="display:table-cell;vertical-align:middle;">
<div>
<p>坦克</p>
<p>航母</p>
</div>
</div>块级元素居中
水平居中
1.定宽块状元素,设置左右margin值为auto
<div style="width: 300px;margin: 20px auto;">
<p>坦克</p>
<p>航母</p>
</div>2.不定宽块状元素方法
方法一:加入table标签,table标签长度自适应性,即不定义其长度也不默认父元素body的长度(其长度根据其内文本长度决定),可以看做一个定宽的元素,然后利用定宽块状居中的margin方法,使其水平居中
<table style="margin: 20px auto;">
<tbody>
<tr>
<td>
<div>
<p>坦克</p>
<p>航母</p>
</div>
</td>
</tr>
</tbody>
</table>方法二:改变块级元素的 display 为 inline类型(设置为行内元素显示),然后使用text-align:center来实现居中效果
<head>
<meta charset="utf-8">
<title>不定宽块状元素水平居中</title>
<style>
.container {
text-align: center;
border: 1px solid red;
}
.container ul {
list-style: none;
display: inline;
}
.container li {
margin-right: 8px;
display: inline;
}
</style>
</head>
<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</body>
</html>方法三:通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>不定宽块状元素水平居中</title>
<style>
.container {
float: left;
position: relative;
left: 50%
}
.container ul {
list-style: none;
margin: 0;
padding: 0;
position: relative;
left: -50%;
}
.container li {
float: left;
display: inline;
margin-right: 8px;
}
</style>
</head>
<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</body>
</html>垂直居中
1.利用CSS属性transform:translate(x,y)
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>垂直居中</title>
<style>
.container {
border:solid 1px red;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="container">
垂直居中
</div>
</body>
</html>2.利用flex布局(不定高不定宽)
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>垂直居中</title>
<style>
.container {
height:300px;
display:flex;
align-items:center;
justify-content:center;
border:1px solid #cc3f13;
}
</style>
</head>
<body>
<div class="container">
<div style="border:solid 2px green;width: 100px;height: 100px;">垂直居中</div>
</div>
</body>
</html>3.设置position:absolute或fiexed,另外margin设置为auto
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>垂直居中</title>
<style>
.container{
width: 100px;
height: 100px;
border:solid 1px blue;
position: absolute;/*或fixed*/
/*上下居中*/
top:0;
bottom:0;
/*左右居中*/
left:0;
right:0;
margin: auto;
}
</style>
</head>
<body>
<div class="container">
<span>居中</span>
</div>
</body>
</html>