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

相关推荐
明明真系叻13 小时前
第二十六周机器学习笔记:PINN求正反解求PDE文献阅读——正问题
人工智能·笔记·深度学习·机器学习·1024程序员节
希忘auto3 天前
详解Redis的常用命令
redis·1024程序员节
yaosheng_VALVE4 天前
探究全金属硬密封蝶阀的奥秘-耀圣控制
运维·eclipse·自动化·pyqt·1024程序员节
dami_king4 天前
SSH特性|组成|SSH是什么?
运维·ssh·1024程序员节
一个通信老学姐9 天前
专业125+总分400+南京理工大学818考研经验南理工电子信息与通信工程,真题,大纲,参考书。
考研·信息与通信·信号处理·1024程序员节
sheng12345678rui9 天前
mfc140.dll文件缺失的修复方法分享,全面分析mfc140.dll的几种解决方法
游戏·电脑·dll文件·dll修复工具·1024程序员节
huipeng92610 天前
第十章 类和对象(二)
java·开发语言·学习·1024程序员节
earthzhang202110 天前
《深入浅出HTTPS》读书笔记(19):密钥
开发语言·网络协议·算法·https·1024程序员节
爱吃生蚝的于勒11 天前
计算机基础 原码反码补码问题
经验分享·笔记·计算机网络·其他·1024程序员节
earthzhang202111 天前
《深入浅出HTTPS》读书笔记(20):口令和PEB算法
开发语言·网络协议·算法·https·1024程序员节