css 两个div垂直对齐

CSS中，让两个或多个div元素垂直对齐是一种常见的需求。下面我们就来看看如何实现这一功能。

div.container {
      display: flex;
      align-items: center;
}

上述代码中，我们通过设置容器的display属性为flex来实现垂直对齐。同时，设置align-items属性为center让元素在垂直方向上居中对齐。

div.container {
      position: relative;
}
div.container::after {
      content: "";
      height: 100%;
      position: absolute;
      top: 0;
      right: 0;
}
div.item {
      position: relative;
      z-index: 1;
}
    

此外，我们还可以通过使用绝对定位来实现垂直对齐。在容器元素上设置position为relative，然后在其后添加一个伪元素，并将其设置为绝对定位。接着，在需要对齐的元素上设置position为relative，同时将其z-index设为1，从而保证其始终位于伪元素上方。最后，在伪元素上设置content为""，height为100%。这样，伪元素就撑满了容器，然后我们设定它的top和right为0，使其与容器顶部和右侧对齐，从而达到垂直对齐的效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！