CSS实现元素水平垂直居中

目标：实现son元素的水平垂直居中

<div class="parent">
    <div class="son"></div>
</div>

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

这种方式适用于父子元素都不确定宽高的情况

.son {
    width: 200px;
    height: 200px;
    background-color: pink;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    //如果子元素的宽高确定的话，translate中的值也可以设置为子元素宽高的一半
    transform: translate(-100px, -100px);
}

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

这种方式适用于子元素宽高确定的情况

.son {
    width: 200px;
    height: 200px;
    background-color: pink;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -100px;
}

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

这种方式适用于父子元素宽高都未知的情况

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

方式四：父元素使用flex布局，并设置相关的属性值为center

这种方式要求父元素的高度是确定的，百分比形式的高度将不能生效。
有关flex布局的使用可以参考阮一峰老师的文章Flex布局教程

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

方式五：使用table-cell实现

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

.parent {
    height: 500px;
    width: 500px;
    background-color: pink;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.son {
    display: inline-block;
    height: 100px;
    width: 100px;
    background-color: red;
}

方式六：使用grid布局

这种方式适用于父元素高度确定的情况
有关gird布局的使用可以参考阮一峰老师的文章CSS Grid布局教程

.parent {
    display: grid;
    height: 500px;
    background-color: pink;
}
.son {
    align-self: center; /*设置单元格内容的垂直位置*/
    justify-self: center; /*设置单元格内容的水平位置*/
    height: 100px;
    width: 100px;
    background-color: red;
}