關於css的垂直水平置中六種方法分享

總結了幾種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+ */  }