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

我将对“纯CSS多种方法实现div中单行文字、多行文字及嵌套div垂直水平居中”的攻略进行详细讲解。

单行文字垂直水平居中

对于单行文字的垂直和水平居中，可以通过以下两种方式实现：

方式一：使用flex布局

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

在这个例子中，我们创建了一个带有class为container的div，并使用flex布局。通过设置justify-content和align-items属性，我们实现了水平和垂直居中。

方式二：使用position和transform属性

.container {
  position: relative;
}

.text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

在这个例子中，我们同样创建了一个带有class为container的div，并使用position属性使其变成相对定位。然后，我们在这个div里面创建了一个带有class为text的子div，并使用position和transform属性来实现垂直和水平居中。

多行文字垂直水平居中

对于多行文字的垂直和水平居中，可以通过以下两种方式实现：

方式一：使用flex布局

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  flex-direction: column; /* 设置排列方向为垂直 */
}

在这个例子中，我们同样使用了flex布局，并设置了flex-direction属性为column，以实现垂直排列。通过设置justify-content和align-items属性，我们实现了水平和垂直居中。

方式二：使用position和transform属性

.container {
  position: relative;
}

.text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap; /* 防止文字换行 */
}

在这个例子中，我们同样使用了position和transform属性，和单行文字垂直居中的方式类似。不过，为了防止文字换行，我们还需要设置white-space属性为nowrap。

嵌套div垂直水平居中

对于嵌套div的垂直和水平居中，可以通过以下两种方式实现：

方式一：使用flex布局

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

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

在这个例子中，我们创建了一个带有class为container-outter的div，并使用flex布局。然后，在这个div里面创建了一个带有class为container-inner的子div，并同样使用了flex布局。通过设置justify-content和align-items属性，我们实现了父容器和子容器的水平和垂直居中。

方式二：使用position和transform属性

.container-outter {
  position: relative;
}

.container-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

在这个例子中，我们同样创建了一个带有class为container-outter的div，并使用position属性使其变成相对定位。然后，在这个div里面创建了一个带有class为container-inner的子div，并使用position和transform属性来实现垂直和水平居中。

以上是关于“纯CSS多种方法实现div中单行文字、多行文字及嵌套div垂直水平居中”的完整攻略，希望对你有所帮助。