纯css多种方法实现div中单行文字、多行文字及嵌套div垂直水平居中

纯CSS多种方法实现div中单行文字、多行文字及嵌套div垂直水平居中攻略

在本攻略中，我将介绍多种纯CSS的方法来实现以下布局需求：

1. 单行文字在div中水平居中。
2. 多行文字在div中水平垂直居中。
3. 嵌套div在父div中水平垂直居中。

单行文字在div中水平居中

要实现单行文字在div中水平居中，可以使用以下CSS样式：

div {
  display: flex;
  justify-content: center;
  align-items: center;
}

这个方法使用了flex布局，通过justify-content: center;和align-items: center;将内容水平和垂直居中。

多行文字在div中水平垂直居中

要实现多行文字在div中水平垂直居中，可以使用以下CSS样式：

div {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

这个方法同样使用了flex布局，但是通过添加flex-direction: column;将内容垂直排列。

嵌套div在父div中水平垂直居中

要实现嵌套div在父div中水平垂直居中，可以使用以下CSS样式：

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

.child {
  margin: auto;
}

这个方法同样使用了flex布局，但是在嵌套的div上添加了margin: auto;来使其在父div中水平垂直居中。

示例说明

示例1：单行文字在div中水平居中

<div class=\"container\">
  <div class=\"centered-text\">
    This is a single line of text.
  </div>
</div>

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

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

在这个示例中，我们创建了一个父div（.container），并在其中创建了一个子div（.centered-text）。通过设置父div的display: flex;、justify-content: center;和align-items: center;，以及子div的text-align: center;，我们实现了单行文字在div中水平居中的效果。

示例2：多行文字在div中水平垂直居中

<div class=\"container\">
  <div class=\"centered-text\">
    <p>This is a paragraph with multiple lines of text.</p>
  </div>
</div>

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

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

在这个示例中，我们使用了与示例1相同的CSS样式，但是将文字放在了一个段落标签（<p>）中。通过设置父div的display: flex;、justify-content: center;和align-items: center;，以及子div的text-align: center;，我们实现了多行文字在div中水平垂直居中的效果。

以上就是实现div中单行文字、多行文字及嵌套div垂直水平居中的完整攻略。希望对你有帮助！