弘帝企业智能建站系统交流平台

 找回密码
 立即注册
查看: 1249|回复: 1

positon:absolute未知宽度DIV水平居中的办法

[复制链接]
发表于 2021-11-26 19:12:55 | 显示全部楼层 |阅读模式
div有宽度的比较好做,有多种办法,比如:方法一:left:-50%;margin-left:-50%的指定宽度
方法二:bottom:0; left:0; right:0;margin:0 auto;

但实际很多盒子构建是未知宽度,如果没有指定宽度,曾经很难找到方法,经过不断寻找方法和测试,以下方法比较好用
首先还是
left: 50%;
然后:
transform: translate(-50%);

仅适用于css3,关于transform:translate(x,y)自行深入了解。
本文首次在模板211122中使用。

在子菜单标题比主菜单标题长时,往往会发现子菜单宽度自动向右延伸,无法水平居中对齐。在模板220223中,采用
position: absolute;
padding-top: 3.4rem;
background: white;
top:4.2rem;
以下是关键
left:50%;
transform: translateX(-50%);

transform强大的定位功能将子菜单过长的标题相对于父标题水平居中。
回复

使用道具 举报

 楼主| 发表于 2022-3-4 16:03:39 | 显示全部楼层

CSStransform属性允许你旋转,缩放,倾斜或平移给定元素

回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|弘帝企业智能建站系统 ( 皖ICP备07503252号 )

GMT+8, 2024-4-20 15:16 , Processed in 0.086235 second(s), 15 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表