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;}新闻热点
疑难解答
