總結了幾種css居中實現的方式，註：*為常用方式，「wrap」為容器，「div」為要居中的元素。
*1.絕對定位，寬高都已知的情況下如下程式碼可實現，或者可以使用negative margins；
.div {
width: 200px;
height: 200px;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}2.不知道元素的寬高，僅僅實現某個div是其父的1/2，水平垂直居中，隨著父元素的大小等比例放大或縮小。
.div{
position: absolute;
left: 30%;
right:30%;
top: 25%;
bottom:25%;
}*3.translate，寬度已知，高度未知的情況下
.wrap{
width:200px;//也可以不写，默认占总宽度的50%
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
}4.table-cell，div本身高度未知，僅實現垂直居中的情況下，ps，此種情況div寬度是100%
.wrap{//外层容器
display: table;
}
.div{//内层容器
display: table-cell;
vertical-align: middle;
}*5.flex佈局，寬度都不固定的情況下，只要在父容器中設定display:flex即可。
.wrap{
display: flex;
display: -webkit-flex;
justify-content: center;
align-items: center;
}6.hack方法，善於運用:after。
.wrap {
text-align: center;
overflow: auto;
}
.wrap:after,
.div {
display: inline-block;
vertical-align: middle;
}
.div:after {
content: '';
height: 100%;
margin-left: -0.25em; /* 需要根据不同的字号做调整 */
}
.wrap {
max-width: 99%; /* 防止文档过长时会到容器的顶部 */
max-width: calc(100% - 0.25em) /* Only for IE9+ */
}以上是關於css的垂直水平居中六種方法分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！
