CSS实现垂直居中的6种办法_css垂直居中

1：使用绝对定位 + transform，给子元素添加如下样式

父子元素都不确定宽高的情况也适用。如果子元素的宽高确定的话，translate中的值也可以设置为子元素宽高的一半，即transform: translate(-100px, -100px);

.work {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
}

2：使用绝对定位 + margin，给子元素添加如下样式

这种方式适合子元素宽高确定的情况，给margin-top设置百分比的大小将不生效，即margin-top: -50%;不能达到垂直居中的效果

.work1 {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -100px;
      margin-left: -100px;
}

3：使用绝对定位 + margin: auto，给子元素添加如下样式

父子元素宽高都未知时也适用。

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

4.父元素使用flex布局，并设置相关的属性值为center

这种方式要求父元素的高度是确定的，百分比形式的高度将不能生效。

.par-work {
    height: 100vh;
    display:flex;
    justify-content:center;
    align-items:center;
}

5：使用table-cell实现

这种方式需要父元素的宽高都是确定的，才能保证子元素在父元素中垂直水平都居中。

.par-work2 {
    height: 500px;
    width: 500px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.son-work2 {
    display: inline-block;
}

6：使用grid布局

这种方式适用于父元素高度确定的情况

.par-work3 {
    display: grid;
    height: 500px;
}
.son-work3 {
    align-self: center; /*设置单元格内容的垂直位置*/
    justify-self: center; /*设置单元格内容的水平位置*/
}