CSS div在div底部居中对齐

在网页设计中，常常会遇到需要将一个小的元素垂直居中对齐于一个较大的元素的底部的情况。在这种情况下，我们可以使用CSS中的flex布局来实现。

使用flex布局

首先，我们需要在包含子元素的父容器中添加以下CSS代码：

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

这段代码将使用flex布局将子元素垂直居中对齐于父容器底部。

接下来，我们需要在子元素中添加具体的CSS样式。比如我们可以添加以下样式：

.child {
  width: 50px;
  height: 50px;
  background-color: red;
}
  

在这个例子中，我们使用了一个红色的正方形div元素作为子元素。

示例