CSS实现垂直居中

# CSS实现垂直居中

用CSS实现垂直居中的方法有很多种：

# 1. line-height 适用于文本居中方法

子元素的line-height跟父元素的height设置一样的高度

<div class="parent">
    <span class="child">你好</span>
</div>

1
2
3

.parent{
    width:200px;
    height:200px;
    border:1px solid red;
}
.child{
    width:200px;
    line-height: 200px;   
    text-align: center; //水平居中
    display: inline-block;
}

1
2
3
4
5
6
7
8
9
10
11

# 2. 设置伪元素 ::before

.parent{
    width:200px;
    height: 200px;
    border:1px solid red;
    
}
.parent::before{
    content:'';
    display: inline-block;
    height:100%;
    vertical-align: middle;  
  
}
.child{
    width:80px;
    height: 100px;
    background:red;
    vertical-align: middle;
    display: inline-block;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

给父元素添加伪元素::before,让伪元素高度为100%，设置为行内块元素，同时子元素也设置为行内块元素，将vertical-align属性设置为middle;

# 3. absolute + translate(-50%,-50%)

.parent{
    width: 200px;
    height: 200px;
    background:#ddd;
    position: relative;
    
}
.child{
    width: 100px;
    height: 50px;
    background:green;
    position: absolute;
    top: 50%;
    left:50%;
    transform: translate(-50% , -50%);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

父元素设置相对定位position:relative，子元素设置绝对定位position:absolute，top和left相对父元素的50%，同时设置transform: translate(-50% , -50%);使得水平和垂直方向上居中。

translate()函数是css3的新特性.在不知道自身宽高的情况下，可以利用它来进行水平垂直居中。当使用：top: 50%;left: 50%;，是以左上角为原点，故不处于中心位置 translate(-50%,-50%) 作用是，往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置。

与负margin-left和margin-top实现居中不同的是，margin-left必须知道自身的宽高，而translate可以在不知道宽高的情况下进行居中，tranlate（）函数中的百分比是相对于自身宽高的百分比，所以能进行居中。

# 4. absolute + calc()

.parent{
  width: 200px;
  height: 200px;
  border:1px solid black;
  position: relative;
}
.child{
  width: 100px;
  height: 50px;
  position: absolute;
  background:red;
  top: calc(50% - 25px); /*垂直居中 */
  left:calc(50% - 50px); /*水平居中 */
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

原理同3类似，calc()中需要通过手动计算子元素宽高来实现

# 5. absolute + margin:auto

.parent{
    width:200px;
    height: 200px;
    position: relative;
    border:1px solid red;   
}
.child{
  width:50px;
    height: 50px;
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
    background:red;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

父元素使用 relative 相对定位，子元素使用absolute绝对定位，同时设置上下左右数值均设置为0，同时设置margin:auto;

# 6. display: flex

 .parent{
    width: 200px;
    height: 200px;
    background: grey;
    display: flex;
    justify-content: center;
    align-items: center;
}
 .child{
    width: 100px;
    height: 50px;
    background:green;
}

1
2
3
4
5
6
7
8
9
10
11
12
13

父元素设置为flex布局，设置justify-content: center;水平居中，设置align-items: center;垂直居中。

# 7. display:table-cell

 .parent{
    width:200px;
    height:200px;
    border:1px solid red;
    display: table;
}
 .child{
    background:red;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}