如何使用 CSS 定位而不是 Flexbox 使文本在图像上居中？

使用 Flexbox 将文本在图像上居中

在本指南中，我们将探索使用纯 CSS 定位属性而不是 Flexbox 将文本在图像上居中的替代方法。

定位属性：

.height-100vh {
  position: relative;
}

.text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

1. 建立相对父级：我们在高度为100vh类的容器元素上设置position:relative，以建立绝对定位的定位祖先。
2. 绝对定位文本：我们在.text上使用position:absolute类将其定位在正常文档流之外。
3. 水平对齐：通过设置 left: 50%，我们通过从容器的左边缘测量文本来水平居中文本。
4. 垂直对齐： 类似地，顶部：50% 通过从顶部边缘测量文本垂直居中
5. 精确居中：为了使文本精确居中，我们应用变换：translate(-50%, -50%)。这会将文本在两个方向上平移 -50%，最终将其移动到中心。

用法示例：

<section class="height-100vh center-aligned">
  <img class="background-image" src="image.jpg" />
  <div class="text">SOME TEXT</div>
</section>

通过实现这些定位属性，您可以有效地居中无需依赖 Flexbox 即可在图像上显示文本。这种方法为这种常见的布局任务提供了一个简单直接的解决方案。

以上是如何使用 CSS 定位而不是 Flexbox 使文本在图像上居中？的详细内容。更多信息请关注PHP中文网其他相关文章！