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

相关推荐
FFDUST12 小时前
C++ 优先算法 —— 四数之和(双指针)
c语言·开发语言·c++·算法·leetcode·1024程序员节
惜.己12 小时前
Jmeter中的配置原件(三)
功能测试·测试工具·jmeter·1024程序员节
惜.己12 小时前
Jmeter中的配置原件(二)
测试工具·jmeter·1024程序员节
惜.己16 小时前
Jmeter中的配置原件(五)
功能测试·测试工具·jmeter·github·1024程序员节
xybm160518 小时前
MTSET可溶于DMSO、DMF、THF等有机溶剂,并在水中有轻微的溶解性,91774-25-3
java·spring·eclipse·tomcat·1024程序员节
dream_ready18 小时前
四万字长文SpringBoot、Spring、SpringMVC等相关面试题(注:该篇博客将会持续维护 最新维护时间:2024年11月12日)
java·spring boot·后端·spring·面试·1024程序员节
paixiaoxin19 小时前
学术界的秘密武器:Zotero7大插件推荐
论文阅读·经验分享·笔记·云计算·学习方法·zotero·1024程序员节
V+zmm1013420 小时前
校园服务平台小程序ssm+论文源码调试讲解
java·小程序·毕业设计·mvc·课程设计·1024程序员节
love_and_hope1 天前
Pytorch学习--神经网络--完整的模型验证套路
人工智能·pytorch·python·神经网络·学习·1024程序员节
阿巴~阿巴~1 天前
C_数据结构(单链表算法题) —— 相交链表、环形链表I、环形链表II、随机链表的复制
c语言·开发语言·数据结构·算法·链表·1024程序员节