[分享]css中水平垂直居中

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

 /* 方式1: absolute + transform */
    .box {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    } 

这种方式使用绝对定位，将元素的左上角移动到父容器的中心点，再使用CSS3的transform将元素水平和垂直都居中。

 /* 方式2: absolute + margin */
    .box {
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -50px; /* 元素宽度的一半 */
        margin-top: -50px; /* 元素高度的一半 */
    } 

这种方式也使用绝对定位将元素的左上角移动到父容器的中心点，但是使用了负的margin来居中元素。需要知道元素的宽和高。

 /* 方式3: flex */
    .parent {
        display: flex;
        justify-content: center; /* 水平居中 */
        align-items: center; /* 垂直居中 */
    } 

使用flex布局，将父容器设置为flex容器，子元素将会成为flex项目。通过设置justify-content和align-items实现水平和垂直居中。

以上三种方式是常用的CSS水平垂直居中的实现方式，常用于实现居中显示图片、弹出框、对话框等。