[分享]css中如何块级居中

CSS中实现块级元素居中有许多方法。本文将介绍常用的三种方法：1. 使用textalign:center使用textalign:center属性可以让块级元素在父容器中水平居中。例如：.parent{...

CSS中实现块级元素居中有许多方法。本文将介绍常用的三种方法：

1. 使用text-align:center

使用text-align:center属性可以让块级元素在父容器中水平居中。例如：

.parent{
    text-align:center;
}
.block{
    display:inline-block;
} 

此时块级元素需要设置为inline-block，否则将无法使用text-align:center属性。同时，由于块级元素宽度默认为100%，所以此方法只能实现水平居中。

2. 使用margin:auto

使用margin:auto可以让块级元素在父容器中水平居中。例如：

.parent{
    position:relative;
}
.block{
    position:absolute;
    left:0;
    right:0;
    margin:auto;
} 

此时需要将父容器的position设置为relative，将块级元素的position设置为absolute，并设置left和right属性均为0，再使用margin:auto即可。这种方法既可以实现水平居中，也可以实现垂直居中。

3. 使用flex布局

使用flex布局可以让块级元素在父容器中水平和垂直居中。例如：

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

此时需要将父容器的display属性设置为flex，并使用align-items:center和justify-content:center属性实现水平和垂直居中。这种方法比较简单，但是兼容性需要考虑。

以上三种方法均可以实现块级元素居中，具体使用根据实际需求选择。