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+ */   
} 

  

  

  

  

posted @ 2016-12-03 18:17  简惬  阅读(579)  评论(0编辑  收藏  举报