怎么让套在里面的div垂直居中显示

有几种方法可以让套在里面的div垂直居中显示：

方法一：使用flexbox布局

可以将父级容器设置为display: flex;和align-items: center;。这将使套在里面的div垂直居中。

HTML代码：

<div class="parent">
  <div class="child">居中显示</div>
</div>

CSS代码：

.parent {
  display: flex;
  align-items: center;
  height: 100vh;
}

.child {
  margin: auto;
}

方法二：使用绝对定位和transform属性

可以将父级容器设置为position: relative;，并将套在里面的div设置为position: absolute;和top: 50%;，然后使用transform属性将其向上移动50%。这将使套在里面的div垂直居中。

HTML代码：

<div class="parent">
  <div class="child">居中显示</div>
</div>

CSS代码：

.parent {
  position: relative;
  height: 100vh;
}

.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

方法三：使用表格布局

可以将父级容器设置为display: table;，并将套在里面的div设置为display: table-cell;和vertical-align: middle;。这将使套在里面的div垂直居中。

HTML代码：

<div class="parent">
  <div class="child">居中显示</div>
</div>

CSS代码：

.parent {
  display: table;
  height: 100vh;
}

.child {
  display: table-cell;
  vertical-align: middle;
}