如何居中div？

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

1、负margin方法

html代码:
<div class="container">     <div class="inner"></div> </div>css代码:
.container{
    width: 500px;height: 400px;border: 2px solid #379;position: relative;
}
.inner{
    width: 200px;
    height: 200px;
    background-color: #746;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -100px; /*height的一半*/
    margin-left: -100px; /*width的一半*/
}
复制代码

2.table－cell方法

html代码：
<div id="box"><img src="img/2.jpg"/> </div>
css代码:
#box{
    width: 300px;
    height: 300px;
    border: 3px solid #555;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
  img{
       vertical-align: middle;
      width: 200px;
      height:200px;
  }
复制代码

3.弹性盒子法

html代码:
<div class="container">
         <div class="inner">
             我在容器中水平垂直居中
         </div>
</div>
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;
 }

复制代码

4，位移方法

位移方法和margin定位方法一样，只不过吧margin改成了位移不需要计算一半是多少，直接

transform:translate(-50%,--50%)