论坛 › 马黑黑教程专版 › 元素水平方向自居中测试

马黑黑 发表于 2026-2-22 13:05

元素水平方向自居中测试

<style>
#showDiv { position: relative; margin: 30px 0; padding: 20px; left: 0; transform: translateX(var(--offsetX)); width: 1200px; min-height: 300px; font-size: 18px; background: rgba(0, 128, 0, 0.3); box-sizing: border-box; backdrop-filter: blur(10px); --offsetX: -100px; }
</style>

<div id="showDiv"></div>       

<script>
function setElmCenter (elm) {
    const pa = elm.parentNode;
    const rect = pa.getBoundingClientRect();
    const winCenter = window.innerWidth / 2;
    const offsetX = winCenter - (rect.left + elm.offsetWidth / 2);

    elm.innerHTML = `父元素相关数据：<br><br>
tagname : ${pa.tagName}<br>
left : ${rect.left}<br>
top : ${rect.top}<br>
right : ${rect.right}<br>
bottom : ${rect.bottom}<br>
width : ${rect.width}<br>
height : ${rect.height}<br><br>
offsetX : ${offsetX}`;

    elm.style.setProperty('--offsetX', `${offsetX}px`);
}

setElmCenter(showDiv);
document.onresize = () => setElmCenter(showDiv);
</script>

马黑黑 发表于 2026-2-22 13:38

元素在视口水平方向自居中的实现原理：先获取元素所在的父元素的相关值，主要是——

其一，父元素左侧离浏览器视口左边缘的距离。这叫偏移量，它可以视为是元素的left属性值（严谨的话还应该让父元素的 margin、padding 等属性值参与计算）；
其二，元素自身的宽度；
其三，视口宽度（window.innerWidth）。

依据获取到的上述各值，我们要计算的是元素初始状态下的中心点和浏览器视口中心点的差距，其结果就是元素的偏移量，我们用 transform 属性的 translateX 将其平移即可。以下是 JS 核心函数：

function setElmCenter (elm) {
    const pa = elm.parentNode; // 获取父元素
    const rect = pa.getBoundingClientRect(); // 获取父元素的矩形数据
    const winCenter = window.innerWidth / 2; // 浏览器视口水平方向中心点
    const offsetX = winCenter - (rect.left + elm.offsetWidth / 2); // 计算偏移量
    elm.style.setProperty('--offsetX', `${offsetX}px`); // 通过CSS变量驱动元素平移
}【附】元素的CSS变量设计：
transform: translateX(var(--offsetX));同时需要注意：元素的 position 属性设置为 relative，left 默认（不设置），margin-left 为 0，这样才能配套 JS 的自动居中定位功能。

马黑黑 发表于 2026-2-22 13:51

一楼加入了 document.onresize 事件，这样，不论浏览器窗口变大变小，毛玻璃效果的元素始终保持水平居中状态。

单独设置元素自居中的方式还有一种做法：为元素创建一个父元素，此父元素 position 去绝对定位 absolute、left 属性为 0，宽度100vw减去20（20是浏览器的滚动条厚度），并使用 grid 布局且约束子元素水平居中，并在获取元素的爷爷元素偏移量之后，使用 transform 的 translateX 将其平移负偏移量、使其与浏览器视口左边缘重合。这个方法还需要撑开元素的爷爷元素的高度，可以考虑的做法是直接设置爷爷元素的高度等于元素的高度（offsetHeight）。

第一种方法较为简洁，第二种方法认为增加的额外考虑的因素过多、略显复杂。

不论使用哪一种实现方法，若追究极致的精准度的话，细节处理都要比这里展示的过程要复杂。

红影 发表于 2026-2-22 16:25

代码自动查询数据并用数据驱动以便达到居中的目的{:4_204:}

马黑黑 发表于 2026-2-22 17:14

红影 发表于 2026-2-22 16:25
代码自动查询数据并用数据驱动以便达到居中的目的

{:4_181:}

小辣椒 发表于 2026-2-22 20:50

黑黑是全方位测试帖子居中{:4_178:}

红影 发表于 2026-2-22 22:10

马黑黑 发表于 2026-2-22 17:14


欣赏黑黑好帖{:4_187:}

马黑黑 发表于 2026-2-22 23:30

红影 发表于 2026-2-22 22:10
欣赏黑黑好帖

{:4_180:}

红影 发表于 2026-2-23 09:12

马黑黑 发表于 2026-2-22 23:30


谢香茶{:4_187:}

马黑黑 发表于 2026-2-23 10:35

红影 发表于 2026-2-23 09:12
谢香茶

不谢

红影 发表于 2026-2-23 20:28

马黑黑 发表于 2026-2-23 10:35
不谢

不谢就没有果酱啊{:4_173:}

马黑黑 发表于 2026-2-23 23:45

红影 发表于 2026-2-23 20:28
不谢就没有果酱啊

下单，拼多多

红影 发表于 2026-2-24 20:07

马黑黑 发表于 2026-2-23 23:45
下单，拼多多

那里的也是其他的谢得来的结果。

马黑黑 发表于 2026-2-24 21:11

红影 发表于 2026-2-24 20:07
那里的也是其他的谢得来的结果。

这个不用管，只管结果

红影 发表于 2026-2-25 21:02

马黑黑 发表于 2026-2-24 21:11
这个不用管，只管结果

结果也是有源头的啊{:4_173:}

马黑黑 发表于 2026-2-25 21:34

红影 发表于 2026-2-25 21:02
结果也是有源头的啊
没听说过你吃个饭得问米是怎么种出来的、鸡腿是怎么养出来的

红影 发表于 2026-2-25 23:08

马黑黑 发表于 2026-2-25 21:34
没听说过你吃个饭得问米是怎么种出来的、鸡腿是怎么养出来的

不管问不问，源头本身存在{:4_173:}

马黑黑 发表于 2026-2-25 23:40

红影 发表于 2026-2-25 23:08
不管问不问，源头本身存在

存在不存在无所谓，有来吃就行

红影 发表于 2026-2-26 15:00

马黑黑 发表于 2026-2-25 23:40
存在不存在无所谓，有来吃就行

这是只顾结果不管过程啊。

马黑黑 发表于 2026-2-26 16:44

红影 发表于 2026-2-26 15:00
这是只顾结果不管过程啊。

也管不了。比方你买的鸡蛋，你管不了鸡蛋是公鸡还是母鸡下的，如果怀疑不是母鸡下的，你最多来个无理由退货

查看完整版本: 元素水平方向自居中测试