[分享]css中div中文字居中

CSS是前端开发中不可或缺的一部分，而div作为最基础的块级元素也是我们常常需要使用的一个标签。在div中居中文字，是我们在布局中常常需要解决的问题。 这里是要居中的文字 要让div中的文字居中，我...

CSS是前端开发中不可或缺的一部分，而div作为最基础的块级元素也是我们常常需要使用的一个标签。在div中居中文字，是我们在布局中常常需要解决的问题。

<div class="center-text">
  <p>这里是要居中的文字</p>
</div> 

要让div中的文字居中，我们可以通过CSS的text-align属性来设置。text-align可以控制元素中文字的对齐方式，包括居左对齐、居右对齐、居中对齐和两端对齐。

.center-text {
  text-align: center;
} 

使用以上代码，我们就可以轻松地将文字居中显示在div中。如果要进行更细致的调整，我们还可以通过line-height属性来控制行高。通过设置行高和文字大小相等，可以让文字在垂直方向上也居中。

.center-text {
  text-align: center;
  line-height: 30px; /* 假设文字大小为30px */
} 

在使用CSS进行文字居中时，需要注意的是，只有文字是行内元素或者是行内块级元素时，text-align属性才会起作用。当元素为块级元素时，text-align只能控制其下面行内元素的对齐方式。

除了上述方法，我们还可以使用Flexbox来进行布局，它可以让我们更方便地对各个元素进行排列。使用Flexbox进行居中时，只需要在盒子容器上设置display: flex和justify-content: center即可。

<div class="flex-container">
  <p>这里是要居中的文字</p>
</div>
.flex-container {
  display: flex;
  justify-content: center;
} 

通过以上方法，我们可以轻松地让div中的文字在水平和垂直方向上都居中显示，为CSS布局带来了更多灵活性和多样性。