CSS的7种常用的垂直居中的方法

1、绝对定位上下百分之五十然后上外边距做外边距都是他的宽高的一半

#child{
     width: 200px;
     height: 150px;
     position: absolute;
     left: 50%;
     top:50%;
     margin-top: -75px;
     margin-left: -100px;
}

 

2、根据上面的方法有一定的变化，不过也是根据绝对定位

.child{
     position: absolute;
     top: 0;
     bottom: 0;
     right: 0;
     left: 0;
     margin: auto;
}

 

3、用于文本且单行，line-height要等于父元素高度

.div{
    text-align:center;
    line-height: 100px;
    background-color:#fff;
}

 

4、利用display:table;与display:table-cell;(注意只有.child框内元素会垂直居中)

.parent{
     display: table;
}
.child{
     display: table-cell;
     vertical-align: middle;
     text-align: center;
　　  background-color: #fff;
}

 

5、利用css3的transfrom

.child{
   width: 10px;
   height: 10px;
   background-color: #fff;
   position: relative;
   top: 50%;
   transform: translateY(-50%);
   margin: 0 auto;
}

 

6、绝对定位不需要知道宽高

.child{
　　position: absolute;
　　left: 50%;
　　top: 50%;
　　transform: translate(-50%, -50%);  /*水平垂直居中*/
}

 

7、flex垂直居中方式

.child{
　　display: flex;
　　justify-content: center;  /*水平居中*/
　　align-items: center;      /*垂直居中*/
}