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;      /*垂直居中*/
}