[分享]css3居中对齐属性

在Web开发中，居中对齐是一个非常常见的需求。CSS3提供了多种方法来实现元素的居中对齐，下面我们将介绍一些常用的居中对齐属性。水平居中对齐：/ 方法一：使用textalign / .containe...

在Web开发中，居中对齐是一个非常常见的需求。CSS3提供了多种方法来实现元素的居中对齐，下面我们将介绍一些常用的居中对齐属性。

水平居中对齐：

/* 方法一：使用text-align */
.container{
    text-align:center;
}

/* 方法二：使用margin */
.center{
    margin:0 auto;
}

/* 方法三：使用flexbox布局 */
.container{
    display:flex;
    justify-content:center;
} 

垂直居中对齐：

/* 方法一：使用line-height */
.container{
    height:200px;
    line-height:200px;
    text-align:center;
}

/* 方法二：使用table-cell */
.container{
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}

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

以上就是常用的居中对齐方法，具体使用时需要根据实际情况来选择合适的方法。尽管有多种方法，但值得注意的是，不同方法的兼容性不同，特别是在一些旧版本的浏览器中可能会存在兼容性问题。