（一）元素水平居中的方式
1）行级元素水平居中对齐（父元素设置 text-align:center）
.outer{
width: 200px;
height: 100px;
border: 1px solid;
text-align:center;
}
.show{
border: 1px solid;
}
.inner{
width: 100px;
height: 50px;
border:1px solid;
}
<div class="outer">
<div class="show">行级元素水平居中</div>
<div class="inner">xxx</div>
</div>
实际就是100%宽度的div文本居中
2) 块级元素水平居中对齐（margin: 0 auto）
.outer-box{
width: 200px;
height: 100px;
border: 1px solid;
text-align: center;
}
.inner-box{
border: 1px solid red;
margin: 0 auto;
height: 50px;
width: 80px;
}
<div class="outer-box">
<div class="inner-box"> 块级元素水平居中</div>
</div>
3）浮动元素水平居中
①宽度不固定的浮动元素
.outerbox{
float:left;
position:relative;
left:50%;
}
.innerbox{
float:left;
position:relative;
right:50%;
}
<div class="outerbox">
<div class="innerbox">我是浮动的</div>
</div>
②宽度固定的互动元素
.outerbox{
background-color:pink; /*方便看效果 */
width:500px ;
height:300px; /*高度可以不设*/
margin: -150px 0 0 -250px; /*使用marin向左移动250px，保证元素居中*/
position:relative; /*相对定位*/
left:50%;
top:50%;
}
<div class="outerbox">
<div>我是浮动的</div>
</div>
4）让绝对定位的元素水平居中对齐
.center{
position: absolute; /*绝对定位*/
width: 500px;
height:300px;
background: red;
margin: 0 auto; /*水平居中*/
left: 0; /*此处不能省略，且为0*/
right: 0; /*此处不能省略，且为0*/
}
经验分享：水平居中的主要属性有
text-alin:center;
margin:0 auto
position:relative|absolute; left:50%;
（二）元素垂直居中对齐
1）对行级元素垂直居中（heiht与line-height的值一样）
height:300px;
line-height:300px;
2）对块级元素垂直居中对齐
2.1）父元素高度固定的情况
①父元素的height与line-height值相同
②需要垂直居中的元素
vertical-align:middle;// 垂直居中对齐
display:inline|inline-block 块级元素转行级元素
<div class="center">
<div class="inner"></div>
</div>
.center{
width: 500px;
height:300px;
line-height: 300px;
border:1px solid;
}
.inner{
background: blue;
width: 300px;
height: 100px;
display: inline-block;
vertical-align: middle;
}
原理
CSS中line-height与vertical-align
CSS vertical-align 属性
2.2）父元素高度不固定的情况
父元素的padding-top和padding-bottom一样
Web前端面试指导(十四)：如何居中一个元素（正常、绝对定位、浮动元素）
