除了 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博客