关于水平居中垂直居中的常用方法

水平居中和垂直居中

分为行内元素、块级元素。

1、行内元素，   设置宽高无效、对margin设置左右有效，上下无效；padding都有效  不会自动换行

给其父元素设置text-align:center,就可以实现行内元素水平居中

line-height:  配合使用设置父元素高度，垂直居中   *缺点，仅限于单行文字

2、块级元素，  设置宽高有效  对margin.padding都有效  自动换行

①定位水平垂直居中

给其元素设置margin:auto,就可以实现水平居中

position垂直居中，需要知道子层高度，根据子层高度来设置margin

同时也可以用定位的方法来实现垂直水平居中

 

②fiex 水平垂直居中

 

position垂直居中二

内容div固定宽高，不固定宽高都可以，但是父层必须要有宽高

缺点：父层宽高，比较灵活

效果 

 

css3的translate垂直居中

这个是最方便，尤其在移动端

.wrap{
    width:220px;
    height:150px;
    overflow:hidden;
}
.item{
    width:100px;
    height:40px;
    margin:0 auto;
    position:relative;
    top:50%;
    transform:translate3d(0px,-50%,0px);
}

flex垂直居中二    

唯一的缺点就是兼容性

​
.wrap{  
    display: -webkit-box;
    display: -moz-box;      
    display: -ms-flexbox;   
    display: -webkit-flex;  
    display: flex;  
    height: 150px;  
    align-items: center ;  
    justify–content: center;  
}  
.item{  
    width: 100px;
    height: 50px;  
    background: #555;  
    line-height: 50px;  
}  

​

其实还有很多种，这里就不都写不出来了