html+css垂直水平居中
阿新 • • 發佈：2019-01-12
垂直水平居中有很多方法，以下展示一些比較好用易於理解的方法：
已知父元素寬高的情況下結合上篇margin-top高度重合問題延伸用margin，padding都很好實現；
以下方法實現未知父元素寬高子元素垂直水平居中，先設定html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> html,body,div{margin:0;padding:0;} html{width:100%;height:100%;} body{ width:100%; height:100%; background:yellow;} div{ width:100px;height:100px;background:red;} </style> </head> <body> <div></div> </body> </html>
上述程式碼以body元素為父元素（父元素寬高未知），div為子元素，設定了一些基礎樣式，通過新增後續樣式讓div在螢幕中垂直水平居中，實現效果如圖：
1、定位：body相對定位，給div絕對定位，然後通過定位位置和margin負值來調整位置
body{position:relative;}
div{ position: absolute;top: 50%;left: 50%;margin-top: -50px;margin-left: -50px;}
這裡div的margin負值可以改為變形屬性，減少修改div寬高時需要修改的屬性值數量（margin百分比是相對父元素的寬度進行的，所以無法用margin百分比來實現位移）
body{position:relative;}
div{ position: absolute;top: 50%;left: 50%;transform:translateX(-50%);transform:translateY(-50%);}
變形屬性transform可以縮寫為
transform:translate(-50%,-50%);
2、彈性盒子：設定彈性盒子來實現效果
body{display: flex;align-items: center;justify-content: center;}
3、偽元素填充
body:before{display: inline-block;content: ""; width: 100%;height: 50%;visibility: hidden;}
div{margin: 0 auto;margin-top: -50px;}
以上僅為垂直居中方法中的一小部分，網上資料齊全，請自行蒐集。
綜上，已知父元素寬高用margin、padding，未知父元素寬高用定位，其他方法建議用以開拓思路。