[分享]css中怎么左右上下居中

CSS中有很多实现元素居中的方法，其中左右居中和上下居中也是经常用到的。下面介绍几种经典的方法。// 左右居中方法1 .container { : relative; } .elem { : abso...

CSS中有很多实现元素居中的方法，其中左右居中和上下居中也是经常用到的。下面介绍几种经典的方法。

// 左右居中方法1
.container {
    position: relative;
}
.elem {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

// 左右居中方法2
.container {
    display: flex;
    justify-content: center;
}

// 上下居中方法1
.container {
    height: 500px; /* 需要指定父元素高度 */
}
.elem {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

// 上下居中方法2
.container {
    display: flex;
    align-items: center;
    justify-content: center;
} 

这些方法都有各自适用的场景，具体选择哪种方法可以根据实际需求进行选择。通过这些方法，我们可以方便地实现元素居中，从而更好地完成网页布局。