CSS div中文本居中

在本文中，我们将介绍如何在CSS中将div中的文本水平和垂直居中。

阅读更多：CSS 教程

水平居中

要将div中的文本水平居中，我们可以使用text-align属性。这个属性可以应用于包含文本的父元素，例如：

div {
  text-align: center;
}

这将使文本在其父元素中水平居中。我们可以在这个div中加入一些文本，如下所示：

<div>
  <p>这是要居中的文本</p>
</div>

运行这个代码，我们可以看到文本已经水平居中了。

垂直居中

要将div中的文本垂直居中，我们需要将其包含在一个父元素中，并将这个父元素居中。我们可以使用display、position和transform属性来实现。具体来说，我们可以这样写：

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  height: 200px; /* 父元素高度 */
}

.child {
  position: absolute;
  transform: translateY(-50%);
}

在上面的代码中，.parent是包含文本的父元素，.child是包含文本的子元素。height属性用于设置父元素的高度。display: flex和justify-content: center和align-items: center用于将父元素水平和垂直居中。position: relative用于使父元素成为.child元素的偏移父元素。transform: translateY(-50%)用于将子元素向上移动50%，使其垂直居中。最后，我们将文本放入子元素中，如下所示：

<div class="parent">
  <div class="child">
    <p>这是要居中的文本</p>
  </div>
</div>

运行这个代码，我们可以看到文本已经水平和垂直居中了。

总结

CSS使我们有能力控制元素的外观和位置。通过text-align、display和position属性，我们可以轻松水平和垂直居中div中的文本。虽然有很多方法可以实现这一目标，但上面的示例是其中一种简单而有效的方法。希望这篇文章能帮助你更好地控制你的网站布局。