position left设置居中，除了auto以外，还有什么方式

问相逢何必曾相识

于 2023-10-24 09:06:26 发布

阅读量264

点赞数

文章标签： 1024程序员节

本文链接：https://blog.csdn.net/wjlcomeon/article/details/134003768

版权

除了 auto 之外，可以使用以下方式设置元素的居中位置：

使用 flexbox：通过将元素的父元素设置为 display: flex，并将子元素设置为 align-items: center 和 justify-content: center，可以使子元素在水平和垂直方向上居中。
使用 grid：通过将元素的父元素设置为 display: grid，并将子元素设置为 place-items: center，可以使子元素在水平和垂直方向上居中。
使用 transform：通过将元素的 transform 属性设置为 translate(-50%, -50%)，可以使元素在水平和垂直方向上居中。
使用 position: absolute：通过将元素的 position 属性设置为 absolute，并将其 left、right、top 和 bottom 属性都设置为 50%，然后通过 transform: translate(-50%, -50%) 将元素移动到居中位置。

这个链接齐全。项目中使用了position，结果真机测试安卓没有居中，ios和浏览器居中了。

后来改成了：（第四种方式解决）

盒子不知道大小的情况：

/*水平垂直居中*/
.box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

关注