实现Div水平垂直居中

水平垂直居中问题，在css中margin: 0 auto;可以实现水平居中，但是在垂直居中方面一直没有特定的属性，直到css3的出现，有了弹性盒，可以通过设置弹性盒直接设置居中位置，做浏览器兼容的话可以通过使用一些hack处理 负margin方法，table-cell方法，位移方法

1，负margin方法：

CSS代码：

.container{      

        width: 500px;       

        height: 400px;       

        border: 2px solid #379;       

        position: relative;  

} 

.inner{      

        width: 480px;       

        height: 380px;       

        background-color: #746;       

        position: absolute;       

        top: 50%;       

        left: 50%;       

        margin-top: -190px; /*height的一半*/       

        margin-left: -240px; /*width的一半*/  

}

HTML代码：

<div class="container">     <div class="inner"></div> </div> 

这里，我们首先用top:50%和left:50%让inner的坐标原点（左上角）移动到container的中心，然后再利用负margin让它往左偏移自身宽的一半，再往上偏移自身高的一半，这样inner的中心点就跟container的中心点对齐了。

2，table－cell方法

CSS代码：

div{    

     width: 300px; 

     height: 300px; 

     border: 3px solid #555; 

     display: table-cell; 

     vertical-align: middle; 

     text-align: center; 

}

img{

     vertical-align: middle; 

}

HTML代码：

<div>     <img src="mm.jpg"> </div> 

通过将盒子转换为table元素，table元素本身是可以通过属性来控制位置，div上面的vertical-align: middle是控制垂直方向上的居中的，而text-align: center是控制水平方向的

3，弹性盒子法

CSS代码：

.container{

       width: 300px; 

       height: 200px; 

       border: 3px solid #546461; 

       display: -webkit-flex; 

       display: flex; 

       -webkit-align-items: center; 

       align-items: center; 

       -webkit-justify-content: center; 

       justify-content: center;  

} 

.inner{

       border: 3px solid #458761; 

       padding: 20px;  

}

HTML代码：

<div class="container"> 

     <div class="inner"> 

         我在容器中水平垂直居中 

     </div> 

</div>

align-items控制垂直方向的居中，justify-content控制水平方向的居中。这是CSS3的新方法

4，位移方法

位移方法和margin定位方法一样，只不过吧margin改成了位移不需要计算一半是多少，直接 transform:translate(-50%,--50%)