html上下个盒子对齐

在HTML中，如果你想要让两个盒子上下对齐，可以使用CSS的flexbox、grid布局，或者是传统的定位技术如`position`和`top/bottom`属性。以下是几种常见的方法：

1. **Flexbox**:

   <style>
   .container {
     display: flex;
     justify-content: center; /* 或者设置为 'flex-start' 或 'flex-end' */
     align-items: center; /* 这会使子元素垂直居中 */
   }
   
   .box {
     width: 100px;
     height: 100px;
     background-color: #f00; /* 示例颜色 */
   }
   </style>
   
   <div class="container">
     <div class="box"></div>
     <div class="box"></div>
   </div>

2. **Grid Layout**:

   <style>
   .container {
     display: grid;
     place-items: center; /* 上下居中 */
   }
   .box {
     width: 100px;
     height: 100px;
   }
   </style>
   
   <div class="container">
     <div class="box"></div>
     <div class="box"></div>
   </div>

3. **Positioning**:

   <style>
   .parent {
     position: relative;
   }
   .child {
     position: absolute;
     top: 50%; /* 对于垂直居中 */
     left: 50%;
     transform: translate(-50%, -50%); /* 移动到中心位置 */
   }
   </style>
   
   <div class="parent">
     <div class="child box" style="width: 100px; height: 100px;"></div>
     <div class="child box" style="width: 100px; height: 100px;"></div>
   </div>