摘自：https://blog.csdn.net/baidu_24024601/article/details/51131368
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>
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>