div垂直居中怎么设置

可以使用以下方法将div垂直居中：

使用flex布局

将父元素设置为display: flex;和align-items: center;即可实现垂直居中。

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

使用绝对定位

将子元素设置为绝对定位，并设置top和bottom属性为0，再将父元素设置为相对定位即可实现垂直居中。

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}

使用表格布局

将父元素设置为display: table;，子元素设置为display: table-cell;和vertical-align: middle;即可实现垂直居中。

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

使用transform属性

将子元素设置为绝对定位，并使用transform属性将其向上移动50%的高度，再使用负的margin-top将其向下移动自身高度的一半，即可实现垂直居中。

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin-top: -自身高度的一半;
}

使用line-height属性

将父元素的line-height属性设置为与父元素高度相等的值，再将子元素的display属性设置为inline-block，即可实现垂直居中。

.parent {
  height: 父元素高度;
  line-height: 父元素高度;
}
.child {
  display: inline-block;
  vertical-align: middle;
}

以上是常用的几种方法，可以根据实际情况选择适合的方法来实现div的垂直居中。

分类