【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; }