[分享]css3居中的方法

CSS3提供了多种方法来实现元素居中对齐，下面将分别介绍几种常用的居中方法。

1. 水平居中

div {
    position: relative;
}
div p {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
} 

2. 垂直居中

div {
    position: relative;
}
div p {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
} 

3. 水平垂直居中

div {
    position: relative;
}
div p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
} 

4. 行内元素水平居中

div {
    text-align: center;
} 

5. flex布局

div {
    display: flex;
    justify-content: center;  /* 水平居中 */
    align-items: center;  /* 垂直居中 */
} 

以上是常用的居中方法，根据实际情况选择合适的方法即可。