除了 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%);
- }
CSS盒子在页面居中的5种常用方法|auto,flex,position的应用_css盒子在浏览器窗口居中-CSDN博客