盒子水平垂直居中10種方法
HTML代碼
<body>
<div id="container">
<div id="box"></div>
</div>
</body>
第一種：通過絕對定位的方式 absolute + 負margin
-
首先知道子元素的寬高，給子元素設置top：50%；left：50%，
-
但絕對定位是基於子元素的左上角，我們所希望的效果是子元素的中心居中顯示。。。。借助外邊距的負值，負的外邊距可以讓元素向相反方向定位，
-
通過指定子元素的外邊距為子元素寬度一半的負值，就可以讓子元素居中了
#container {
position: relative;
width: 600px;
height: 500px;
border: 1px solid #000;
margin: auto;
}
#box {
position: absolute;
width: 200px;
height: 200px;
left: 50%;
top: 50%;
margin: -100px -100px;
background-color: #0ff;
}
優點： 比較好理解，兼容性好
缺點： 需要知道子元素的寬高
第二種：也是通過絕對定位的方式 absolute + margin auto
- 這個是需要將各個方向的距離都設0，再講margin設為auto；就行
優點： 兼容性也很好
缺點： 需要知道子元素的寬高
第三種：absolute + calc（計算）
-
這種方法top的百分比是基於元素的左上角，那么在減去寬度與高度的一半就好了
-
calc:任何長度值都可以使用calc()函數進行計算；
-
calc()函數使用標准的數學運算優先級規則；
-
它支持 “+”, “-”, “*”, “/” 運算
也可以查看calc教程： https://www.runoob.com/cssref/func-calc.html
優點： 他的兼容性依賴的是calc的兼容性
缺點： 同樣是需要知道子元素的寬高
第四種：absolute + transform （過渡）
-
這個方法不需要子元素固定寬高
-
修復絕對定位的問題，還可以使用css3新增的transform，transform的translate
-
屬性也可以設置百分比，其是相對於自身的寬和高，所以可以將translate設置為-50%，就可以做到居中了
#container {
position: relative;
width: 600px;
height: 600px;
border: 1px solid #000;
margin: auto;
}
#box {
position: relative;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
background-color: #0ff;
}
優點： 代碼量少
缺點： IE8不支持, 屬性需要追加瀏覽器廠商前綴, 可能干擾其他 transform 效果, 某些情形下會出現文本或元素邊界渲染模糊的現象.
第五種：line-height
- 只對文本有效果，對定寬高的div是沒有用的。所以在文本水平垂直居中時使用。
優點： 代碼簡潔
缺點： 只對文本有效，只對單行文本有效，多行文本不可以
第七種：table 形式
- 通過table單元格的形式設
優點： tabel單元格中的內容天然就是垂直居中的，只要添加一個水平居中屬性就好了
缺點： 這個不是table的正確方法，不是很建議使用，但是也是可以實現的
第八種：table-cell實現水平垂直居中: table-cell middle center組合使用
直接給父級設
#container {
display: table-cell;
vertical-align: middle;
text-align: center;
width: 240px;
height: 180px;
border:1px solid #666;
}
第九種：彈性盒子的方式
#container {
width: 600px;
height: 600px;
border: 1px solid #000;
display: flex
justify-content: center;
align-items: center;
}
優點： 移動端使用靈活自如
缺點： pc端需要根據兼容情況來判定
第十種：grid（網格布局）
-
給父級設display:grid;
-
給子元素設align-self: center;justify-self: center;
優點： 代碼量少
缺點： 兼容不如flex，建議用flex