div里套一个div里面的div水平垂直居中

可以通过使用 CSS 的 flex 布局来实现 div 内的子元素水平垂直居中。以下是一个示例：

<div class="container">
  <div class="center">
    <div class="content"></div>
  </div>
</div>

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 300px;
  background-color: #eee;
}

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

.content {
  width: 100px;
  height: 100px;
  background-color: #ccc;
}

上述代码将创建一个带有灰色背景的 div，其中包含一个嵌套的 div，它包含一个宽高均为 100 像素的灰色 div。父 div 使用 flex 布局，并将其子元素水平垂直居中。子 div 也使用 flex 布局，以使其子元素水平垂直居中。您可以根据需要调整容器和内容的大小和颜色。

相关问题

如何让一个div在另一个div中垂直水平居中

要让一个 `div` 在另一个 `div` 中垂直水平居中，可以使用以下的 CSS 样式：

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

.inner {
  /* 宽度和高度可以根据需求进行调整 */
  width: 200px;
  height: 200px;
}

其中，外层的 `div` 设置了 `display: flex;` 属性，使其成为一个 flex 容器。然后，通过 `justify-content: center;` 和 `align-items: center;` 属性将内部的 `div` 水平垂直居中。内部的 `div` 可以设置固定的宽度和高度，或者根据内容自适应宽高。

div里面的元素垂直居中

可以通过设置 div 的 display 属性为 flex，再设置 align-items 和 justify-content 属性为 center 来实现 div 内部元素的垂直居中。示例代码如下：

<div style="display: flex; align-items: center; justify-content: center;">
  <p>这里是要垂直居中的元素</p>
</div>

这样就可以将 div 内的元素垂直居中了。