居中DIV CSS介绍

居中DIV是在web设计中经常使用的技术。在此介绍两种实现方式。

水平居中

使用margin属性

将左右margin属性设置为'auto'，这种方法适用于宽度已知的元素。

#centered {
    width: 500px;
    margin: 0 auto;
}

使用flex布局

使用flex布局是另一种实现水平居中的方法。将父元素的display属性设置为'flex'，再将子元素的'justify-content'属性设置为'center'，即可实现水平居中。

#parent {
    display: flex;
    justify-content: center;
}

垂直居中

使用绝对定位

将子元素的绝对定位设置为50%，并将margin-top属性设置为负子元素高度的一半。

#centered {
    position: absolute;
    top: 50%;
    left:50%;
    height: 200px;
    width: 300px;
    margin-top: -100px; /* 200/2 */
    margin-left: -150px; /* 300/2 */
}

使用flex布局

同样使用flex布局，将父元素的'display'属性设置为'flex'，'align-items'属性设置为'center'，即可实现垂直居中。

#parent {
    display: flex;
    align-items: center;
}

水平与垂直居中同时实现

结合以上两种方式即可实现同时水平垂直居中。

#centered {
    position: absolute;
    top: 50%;
    left:50%;
    height: 200px;
    width: 300px;
    margin-top: -100px; /* 200/2 */
    margin-left: -150px; /* 300/2 */
}

#parent {
    display: flex;
    align-items: center;
    justify-content: center;
}

以上就是实现居中DIV的两种方式，可以根据实际需求选择使用哪种方式。