[分享]css中div上下居中对齐

使用CSS将DIV垂直居中对齐的方法有很多种，但最常用的方法是使用CSS Flexbox布局。这种方法非常简单，只需要将父元素设置为display：flex，再设置alignitems：center和...

使用CSS将DIV垂直居中对齐的方法有很多种，但最常用的方法是使用CSS Flexbox布局。这种方法非常简单，只需要将父元素设置为display：flex，再设置align-items：center和justify-content：center即可。
下面是具体实现的代码：

css
.parent {
  display: flex;
  align-items: center;
  justify-content: center;
}
<br>
.child {
  /* 其他样式 */
} 

如上所述，将所有子元素放在类名为“parent”的父元素中。父元素设置为Flexbox布局，并使用align-items和justify-content的值使所有子元素垂直居中对齐。
如果不想使用Flexbox布局，那么可以使用相对/绝对定位的方法对DIV进行定位。这种方法需要设置父元素的position：relative属性，再将子元素的position：absolute设置为50％的高度和宽度，再使用transform属性来将元素向上/向左移动50％。
下面是代码示例：

css
.parent {
  position: relative;
}
<br>
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
} 

如上所述，我们将父元素设置为relative，将子元素设置为absolute，并使用50％部分高度和宽度将其居中。最后，使用transform的translate（-50％， -50％）属性将其向上和向左移动50％。
最后，值得一提的是，CSS Grid布局也可以实现DIV的垂直居中对齐。但与Flexbox布局相比，CSS Grid布局的代码会更复杂。
以上是CSS中DIV上下居中对齐的两种方法。希望可以帮助大家更轻松地解决这个问题。