如何实现元素在任意尺寸视口下始终保持屏幕水平居中？

你当前的写法无法实现跨视口尺寸始终水平居中，核心问题有两点：

• 所有盒子都设置了position: absolute脱离正常文档流，手动硬编码的left百分比仅在特定视口宽度下视觉上居中，视口尺寸变化后比例直接失效，要么偏左要么溢出视口
• 父容器.jobFields没有配置对应的布局规则和定位上下文，绝对定位的子元素默认相对整个视口计算位置，无法形成统一的居中整体

你这个是典型的2行4列网格布局，用CSS Grid实现代码量极少，天然支持整体居中，完全不需要给每个盒子单独写定位、算偏移值，直接替换原有代码即可：

<div class='jobFields'>
    <div class='field-item'></div>
    <div class='field-item'></div>
    <div class='field-item'></div>
    <div class='field-item'></div>
    <div class='field-item'></div>
    <div class='field-item'></div>
    <div class='field-item'></div>
    <div class='field-item'></div>
    <style>
        .jobFields {
            position: relative;
            /* 控制整体距离顶部的距离，替换原代码的top值 */
            margin-top: 400px;
            /* 块级元素水平居中必备 */
            margin-inline: auto;
            /* 网格布局配置：4列每列宽250px，2行每行高150px */
            display: grid;
            grid-template-columns: repeat(4, 250px);
            grid-template-rows: repeat(2, 150px);
            /* 盒子之间的横向、纵向间距，可按需调整 */
            gap: 40px;
            /* 容器宽度完全由内容撑开，保证居中计算准确 */
            width: fit-content;
        }
        .field-item {
            box-shadow: 10px 10px;
            background-color: #0f0f0f;
            color: #5e00bc;
            z-index: 2;
        }
    </style>
</div>

• 8个盒子组成的整体区块会始终保持在页面水平居中位置，不受视口宽度变化影响
• 不需要给8个盒子单独写重复样式，后续调整盒子尺寸、间距只需要修改父容器的几行配置即可，维护成本极低
• 适配移动端简单，只需要加一行媒体查询，在小视口下把列数改成2列或者1列即可，不会出现盒子溢出屏幕的问题

如果你一定要保留绝对定位的写法，也可以修改：给.jobFields设置position: relative; width: 1160px; margin: 400px auto 0; height: 340px;，让所有绝对定位的子元素相对这个固定宽度、本身居中的父容器计算偏移位置，也能实现居中效果，但这种写法灵活性差，后续调整尺寸需要重新计算所有偏移值，不推荐使用。

内容的提问来源于stack exchange，提问作者V4N464NDR