（一）元素水平居中的方式

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*/
}

经验分享：水平居中的主要属性有

1. text-alin:center;

2. margin:0 auto

3. 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前端面试指导(十四)：如何居中一个元素（正常、绝对定位、浮动元素）