[分享]css上下两个盒子垂直对齐

上下两个盒子垂直对齐是网页设计中经常会遇到的问题。在CSS中，我们可以使用flexbox和grid等布局技术来解决这个问题。 使用Flexbox Flexbox是一个基于盒子模型的布局模式，可以轻松地...

上下两个盒子垂直对齐是网页设计中经常会遇到的问题。在CSS中，我们可以使用flexbox和grid等布局技术来解决这个问题。
使用Flexbox Flexbox是一个基于盒子模型的布局模式，可以轻松地在一个容器中对齐和排列元素。要使用Flexbox来垂直对齐两个盒子，可以将它们都放到一个容器中，然后使用align-items属性来指定垂直对齐方式。
下面是一个示例代码：

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 500px;
}
<br>
.box1 {
  background-color: #ffa500;
  width: 200px;
  height: 100px;
}
<br>
.box2 {
  background-color: #87ceeb;
  width: 200px;
  height: 200px;
} 

在这个例子中，我们使用了一个容器div，并将其display属性设置为flex，这样就可以将其内部的元素排列在水平或垂直方向。然后使用align-items属性将两个盒子垂直居中。
使用Grid Grid是CSS中另一个强大的布局工具，类似于Flexbox，可以轻松地对齐和排列元素。要使用Grid来垂直对齐两个盒子，可以将它们都放到一个容器中，并将其作为Grid的子元素。
下面是一个示例代码：

.container {
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  height: 500px;
}
<br>
.box1 {
  background-color: #ffa500;
  width: 200px;
  height: 100px;
  justify-self: center;
  align-self: end;
}
<br>
.box2 {
  background-color: #87ceeb;
  width: 200px;
  height: 200px;
  justify-self: center;
  align-self: start;
} 

在这个例子中，我们使用了一个容器div，并将其display属性设置为grid，然后使用grid-template-rows属性将容器分为三个行，其中中间的自动高度的行将两个盒子垂直对齐。我们还使用了justify-self和align-self属性来指定盒子在网格单元中的对齐方式。
总结 上下两个盒子垂直对齐是一个常见的问题，在CSS中可以使用Flexbox或Grid来轻松解决。通过设置属性值，我们可以方便地指定盒子在容器中的对齐方式，从而使网页设计更加完美。