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

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

  1. 使用 flexbox:通过将元素的父元素设置为 display: flex,并将子元素设置为 align-items: centerjustify-content: center,可以使子元素在水平和垂直方向上居中。
  2. 使用 grid:通过将元素的父元素设置为 display: grid,并将子元素设置为 place-items: center,可以使子元素在水平和垂直方向上居中。
  3. 使用 transform:通过将元素的 transform 属性设置为 translate(-50%, -50%),可以使元素在水平和垂直方向上居中。
  4. 使用 position: absolute:通过将元素的 position 属性设置为 absolute,并将其 leftrighttopbottom 属性都设置为 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博客

相关推荐
程序员是干活的9 小时前
私家车开车回家过节会发生什么事情
java·开发语言·软件构建·1024程序员节
freellf9 天前
数据结构及基本算法
1024程序员节
BruceGerGer25 天前
flutter开发实战-flutter web加载html及HtmlElementView的使用
flutter·1024程序员节
网络冒险家2 个月前
【软考】系统集成项目管理工程师【第二版】
职场和发展·软考·集成学习·1024程序员节·系统集成项目工程师
BruceGerGer2 个月前
flutter开发实战-AssetBundle读取指定packagename的文件
flutter·1024程序员节
sheng12345678rui2 个月前
最新缺失msvcp140.dll的多种解决方法,有效解决电脑dll问题
windows·microsoft·电脑·dll文件·1024程序员节
a5553338203 个月前
电脑显示mfc140u.dll丢失的修复方法,总结7种有效的方法
java·经验分享·dll·dll文件丢失·1024程序员节
行十万里人生3 个月前
C++ 智能指针
linux·c++·git·阿里云·容器·蓝桥杯·1024程序员节
a5553338203 个月前
启动鸣潮提示错误代码126:加载d3dcompiler_43.dll错误或缺失的7个解决方法
前端·经验分享·dll·dll文件丢失·1024程序员节
BruceGerGer3 个月前
flutter开发实战-Webview及dispose关闭背景音
flutter·1024程序员节