css实现文本和div居中对齐详细讲解示例

关于“CSS实现文本和div居中对齐”的攻略，我会从以下三个方面进行说明:

1. 实现文本居中对齐
2. 实现div居中对齐
3. 示例说明

1. 实现文本居中对齐

要实现文本居中对齐，可以使用text-align属性，将文本的水平对齐方式设置为居中。比如：

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

这样，将该样式应用到需要居中对齐的元素上，即可实现文本的居中对齐。

2. 实现div居中对齐

要实现div的居中对齐，可以使用以下方法之一：

1) 使用flex布局

使用flex布局是一种较为简单的实现div居中对齐的方法。使用该方法，只需要将父容器设置为flex布局，然后设置子元素的对齐方式为居中即可，比如：

.container {
  display: flex;
  justify-content: center; /* 水平居中对齐 */
  align-items: center; /* 垂直居中对齐 */
}

2) 使用绝对定位

使用绝对定位虽然略为麻烦，但也是一种常用的实现div居中对齐的方法。使用该方法，需要将需要居中的元素的左、上、右、下属性都设置为0，并将该元素的margin属性设置为auto，比如：

.container {
  position: relative; /* 父容器需要设置为相对定位 */
}
.center-div {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

这样设置后，该div就会在父容器的水平和垂直方向上都居中对齐。

3. 示例说明

例如，下面是一个实现文本和div居中对齐的示例代码：

<div class="container">
  <p class="text-center">这是一段需要居中对齐的文本</p>
  <div class="center-div">这是一个需要居中对齐的div</div>
</div>

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  border: 1px solid #333;
}

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

.center-div {
  width: 200px;
  height: 100px;
  background-color: rgba(0, 0, 0, 0.1);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

这里的.container是一个父容器，包含一个需要居中对齐的文本和一个需要居中对齐的div。设置.container的display属性为flex，并设置justify-content和align-items属性为center，则可以实现文本和div在父容器中水平和垂直方向上的居中对齐。同时，对文本应用.text-center样式，对div应用.center-div样式，分别实现了文本和div的居中对齐。