1：用inline-block和vertical-align来实现居中：适用于未知宽高的情况
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <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"> <img src="erweima.png" height="100" width="100"> </div> </div> </body> </html>
2：用相对绝对定位和负边距实现垂直水平居中：适用于宽高已知
3：利用绝对定位来实现居中：适用于宽高已知
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <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"> <img src="erweima.png" height="100%" width="100%"> </div> </div> </body> </html>
4：使用table-cell和inline-block实现居中：适用于宽高未知的情况
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <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"> <img src="erweima.png" height="100" width="100"> </div> </div> </body> </html>
5：用CSS3中的transform来实现居中：适用于未知宽高的情况
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <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"> <img src="erweima.png" height="100" width="100"> </div> </div> </body> </html>
6：用Flexbox布局来实现居中，但是要注意兼容性：适用于宽高未知的情况
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <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"> <img src="erweima.png" height="100" width="100"> </div> </div> </body> </html>