admin 发表于 2021-11-26 19:12:55

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

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强大的定位功能将子菜单过长的标题相对于父标题水平居中。

admin 发表于 2022-3-4 16:03:39

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

https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform
页: [1]
查看完整版本: positon:absolute未知宽度DIV水平居中的办法