CSS绝对定位下div设置left:50%后文本视觉未正确居中怎么办

你当前代码使用position: absolute; left: 50%实现定位时，规则是将元素的左边界对齐到父容器水平方向50%的位置，而非将元素的中心线对齐到该位置。由于你设置的文本字号达1150%，元素自身宽度很大，整体会向右偏移半个自身宽度，最终呈现视觉上不居中的效果。

方案1：最小改动适配现有代码 #

在原有样式中新增transform: translateX(-50%);属性即可，该属性会将元素向左拉动自身宽度的50%，刚好抵消left: 50%带来的偏移。修改后完整代码如下：

<div style="font-family: 'Algerian'; color: #000000; font-size: 1150%; position: absolute; left: 50%; top: 10%; transform: translateX(-50%);">EUROPA</div>

如果需要下方按钮和文本一起居中，可将按钮放入该div内部，或给按钮添加相同的定位+偏移属性；更简便的方式是把文本和按钮包裹在同一个父容器中，给父容器添加上述定位属性，内部子元素会同步居中。

方案2：Flex布局（长期维护更推荐） #

放弃容易出偏移问题的绝对定位计算，给承载内容的父容器设置Flex布局，居中逻辑更直观，不会出现计算偏差：

<!-- 父容器统一控制居中 -->
<div style="width: 100%; position: absolute; top: 10%; display: flex; flex-direction: column; align-items: center;">
  <div style="font-family: 'Algerian'; color: #000000; font-size: 1150%;">EUROPA</div>
  <!-- 下方按钮直接放在此处，会自动和文本保持水平居中对齐 -->
  <button>你的按钮</button>
</div>

• 单独给元素设置text-align: center无法解决该问题，该属性仅能控制元素内部内容的对齐，不能修正绝对定位下元素本身的位置偏移
• 使用transform偏移方案时，避免给该元素添加其他修改transform属性的动画效果，防止位置错乱

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