div中的div文字居中

可以通过设置 CSS 样式来实现 div 中的 div 文字居中。

HTML 代码：

<div class="outer">
  <div class="inner">居中文字</div>
</div>

CSS 代码：

.outer {
  display: flex;  /* 设置为 flex 布局 */
  justify-content: center;  /* 水平居中 */
  align-items: center;  /* 垂直居中 */
}
.inner {
  text-align: center;  /* 文字水平居中 */
}

以上 CSS 样式中，通过 `display: flex;` 将外层 div 设置为 flex 布局，通过 `justify-content: center;` 和 `align-items: center;` 分别实现水平和垂直居中。同时，通过设置内层 div 的 `text-align: center;` 实现文字水平居中。

相关问题

div下的div文字居中

您可以使用 CSS 属性 text-align 来实现 div 内文字的居中，如下所示：

HTML 代码：

<div class="outer">
  <div class="inner">
    文字居中
  </div>
</div>

CSS 代码：

.outer {
  text-align: center; /* 水平居中 */
}

.inner {
  display: inline-block; /* 必须要加上这句 */
  vertical-align: middle; /* 垂直居中 */
}

这样，内部的 div 元素中的文字就会水平和垂直都居中了。需要注意的是，垂直居中需要将内部 div 的 display 属性设置为 inline-block，否则不起作用。

div 文字垂直居中div

可以使用 flex 布局实现 div 元素中的文字垂直居中。具体实现方式如下：

HTML 代码：

<div class="container">
  <p>这是一段文字</p>
</div>

CSS 代码：

.container {
  display: flex; /* 将容器设置为 flex 布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 200px; /* 设置容器高度 */
  border: 1px solid #ccc; /* 添加边框 */
}

p {
  margin: 0; /* 去除默认的外边距 */
}

这样，容器中的文字就可以实现垂直居中了。