css中如何让盒子水平垂直居中

CSS中实现水平垂直居中是经常遇到的问题，下面介绍几种常用的方法。

/* 方法一：使用定位和margin */
.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -50px 0 0 -50px; /* 50为盒子宽度、高度的一半 */
}

/* 方法二：使用flex布局 */
.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 方法三：使用table布局 */
.parent {
    display: table;
}
.child {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
} 

以上三种方法均可实现水平垂直居中，具体使用根据自己的情况选择即可。