【css】实现垂直水平居中的几种方法

1.用inline-block和vertical-align来实现居中：这种方法适合于未知宽度高度的情况下。

<div id="container">
     <div id="center-div">
         xxx
     </div>
</div>
...
#container{
      **text-align: center**;
      height: 400px;
      background: #4dc71f;
}
#container:before{
      content: "";
      height: 100%;
      **display: inline-block;
      vertical-align: middle;**
      margin-right: -0.25em;
}
#center-div{
      display: inline-block;
      vertical-align: middle;
      background: #2aabd2;

}

参考：https://css-tricks.com/centering-in-the-unknown/

2.用相对绝对定位和负边距实现上下左右居中：高度和宽度已知

<div class="div2">
     <img class="img2" src="images/hongbao.png">
</div>
...
.div2{
   height: 600px;
   width: 600px;
   position: relative;
   border: 2px solid #000;
}
.img2{
   height: 200px;
   width: 200px;
   position: relative;
   **top: 50%;
   left: 50%;
   margin: -100px 0 0 -100px;**
}

首先相对父元素top，left定位在50%的位置，这时候只是图片左上角居中，而中心点还没居中，加上margin: -100px 0 0 -100px;利用负边距把图片的中心点位于父元素的中心点，从而实现垂直水平居中

3.利用绝对定位来实现居中：适合高度，宽度已知的情况。

<div id="container">
     <div id="center-div">
         xxx
     </div>
</div>
...
#container{
     text-align: center;
     height: 400px;
     background: #4dc71f;
     position: relative;
}
#center-div{
     position: absolute;
     margin: auto;
     top: 0;
     right: 0;
     left:0;
     bottom: 0;
     width: 200px;
     height: 200px;
     background: #2b669a;
}

4.使用table-cell，inline-block实现水平垂直居中：适合高度宽度未知的情况

#container{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    height: 300px;
    background: #ccc;
}
#center-div{
    display: inline-block;
}

5.使用css3中的transform来时实现水平垂直居中：适合高度宽度未知的情况

#container{
    position: relative;
    height: 200px;
    background: #333;
}
#center-div{
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

还可以使用Flexbox来实现水平垂直居中；适合宽度高度未知情况，但是要注意兼容性

<div id="p_2">
     <div id="c_2">
         xxxxxxx
     </div>
</div>
#p_2{
     display: flex;
     justify-content: center;
     align-items: center;
     width: 200px;
     height: 200px;
     background: #009f95;
}