元素水平方向自居中测试

马黑黑

马黑黑

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

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

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

1. function setElmCenter (elm) {
   
2.     const pa = elm.parentNode; // 获取父元素
   
3.     const rect = pa.getBoundingClientRect(); // 获取父元素的矩形数据
   
4.     const winCenter = window.innerWidth / 2; // 浏览器视口水平方向中心点
   
5.     const offsetX = winCenter - (rect.left + elm.offsetWidth / 2); // 计算偏移量
   
6.     elm.style.setProperty('--offsetX', `${offsetX}px`); // 通过CSS变量驱动元素平移
   
7. }

复制代码

【附】元素的CSS变量设计：

1. transform: translateX(var(--offsetX));

复制代码

同时需要注意：元素的 position 属性设置为 relative，left 默认（不设置），margin-left 为 0，这样才能配套 JS 的自动居中定位功能。

马黑黑

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

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

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

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