以前總是被垂直居中的方法所困擾，今天來總結一下垂直居中的方法，增強記憶
div等塊級元素居中
第一種方法，利用絕對定位居中（相對於父容器），就是要居中的元素相對父容器做一個絕對定位，要求塊級元素的高度和寬度確定（水平居中則要求寬度確定），然后設置上下左右數值都為零，再設置外邊距為自動就可以了，代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>垂直居中測試</title> <style> * { padding: 0; margin: 0; } body { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } #myBox { width: 500px; border: 1px solid black; background: #eee; color: #333; text-align: center; } div { height: 500px; left: 0; right: 0; top: 0; bottom: 0; position: absolute; margin: auto; } </style> </head> <body> <div id="myBox"> 我是測試 </div> </body> </html>
實現的效果如下：
如果是只要求垂直居中，則div的寬度可以不確定，外邊距的值設置成margin：auto 0；去掉div的right和left其他值不變，代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>垂直居中測試</title> <style> * { padding: 0; margin: 0; } body { position: absolute; top: 0; bottom: 0; margin: 0 auto; } #myBox { width: 500px; border: 1px solid black; background: #eee; color: #333; text-align: center; } div { height: 500px; left: 0; right: 0; top: 0; bottom: 0; position: absolute; margin: auto; } </style> </head> <body> <div id="myBox"> 我是測試 </div> </body> </html>
效果如下：
在高度確定的情況下，還可以利用css3的flex屬性處置居中。就是在需要居中的元素的父容器里面設置：display：flex;align-items: center;就可以了，如果還想水平居中加上justify-content：center;代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>垂直居中測試</title> <style> * { padding: 0; margin: 0; } body { display: flex; position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto; border: 1px solid red; text-align: center; align-items: center; justify-content: center; } #myBox { width: 500px; border: 1px solid black; background: #eee; color: #333; } div { height: 500px; } </style> </head> <body> <div id="myBox"> 我是測試 </div> </body> </html>
效果如下：
這個方法是css3的新屬性，如果要兼容不支持該屬性的瀏覽器不要使用。
如果想做的div是個彈窗之類的東西，寬度高度都不確定，還要垂直水平居中，這個更簡單，目前只發現一種辦法，父容器設置display: flex;要居中的元素設置margin： auto；就行了，代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>垂直居中測試</title> <style> * { padding: 0; margin: 0; } body { display: flex; position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto; border: 1px solid red; } #myBox { display: inline-block; border: 1px solid black; background: #eee; color: #333; margin: auto; } </style> </head> <body> <div id="myBox"> <p>我是測試</p> <p>我是測試</p> <p>我是測試</p> <p>我是測試</p> </div> </body> </html>
效果如下：
這個方法也是僅適用支持css3的瀏覽器。