1.用inline-block和vertical-align来实现居中：这种方法适合于未知宽度高度的情况下。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>#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;}</style></head><body><div id="container"><div id="center-div">xxx</div></div></body>
参考：https://css-/centering-in-the-unknown/
2.用相对绝对定位和负边距实现上下左右居中：高度和宽度已知
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>test</title><style>.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;}</style></head><body><div class="div2"><img class="img2" src="images/hongbao.png"></div></body></html>
其实第二种要理解不能，首先相对父元素top，left定位在50%的位置，这时候只是图片左上角居中，而中心点还没居中，加上margin: -100px 0 0 -100px;利用负边距把图片的中心点位于父元素的中心点，从而实现垂直水平居中
3.利用绝对定位来实现居中：适合高度，宽度已知的情况。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>#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;}</style></head><body><div id="container"><div id="center-div">xxx</div></div></body></html>
4.使用table-cell，inline-block实现水平垂直居中：适合高度宽度未知的情况
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>#container{display: table-cell;text-align: center;vertical-align: middle;height: 300px;background: #ccc;}#center-div{display: inline-block;}</style></head><body><div id="container"><div id="center-div">xxx</div></div></body></html>
5.使用css3中的transform来时实现水平垂直居中：适合高度宽度未知的情况
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>#container{position: relative;height: 200px;background: #333;}#center-div{position: absolute;top:50%;left: 50%;transform: translate(-50%,-50%);}</style></head><body><div id="container"><div id="center-div">xxx</div></div></body></html>
还可以使用Flexbox来实现水平垂直居中；适合宽度高度未知情况，但是要注意兼容性
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>#p_2{display: flex;justify-content: center;align-items: center;width: 200px;height: 200px;background: #009f95;}</style></head><body><div id="p_2"><div id="c_2">xxxxxxx</div></div></body></html>
