[分享]css两个盒子中线对齐

在CSS中，要想实现两个盒子中线对齐，首先需要了解CSS盒模型。每个HTML元素都可以看成一个矩形盒子，包含内容、内边距、边框和外边距四个部分。其中，内边距和边框会影响盒子的大小，外边距则会影响盒子的...

在CSS中，要想实现两个盒子中线对齐，首先需要了解CSS盒模型。每个HTML元素都可以看成一个矩形盒子，包含内容、内边距、边框和外边距四个部分。其中，内边距和边框会影响盒子的大小，外边距则会影响盒子的位置。

以下是两个不同大小的盒子，我们将它们进行中线对齐：

<div class="box1">
  <p>盒子1</p>
</div>

<div class="box2">
  <p>盒子2</p>
</div>

<style>
  .box1 {
    border: 2px solid #333;
    padding: 10px;
    width: 200px;
    height: 100px;
  }
  .box2 {
    border: 2px solid #333;
    padding: 20px;
    width: 150px;
    height: 150px;
  }
</style> 

现在将它们进行水平中线对齐。可以使用flexbox进行布局：

<div class="container">
  <div class="box1">
    <p>盒子1</p>
  </div>

  <div class="box2">
    <p>盒子2</p>
  </div>
</div>

<style>
  .container {
    display: flex;
    flex-direction: row;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    height: 100vh; /* 设置高度占据整个屏幕 */
  }
  .box1 {
    border: 2px solid #333;
    padding: 10px;
    width: 200px;
    height: 100px;
  }
  .box2 {
    border: 2px solid #333;
    padding: 20px;
    width: 150px;
    height: 150px;
  }
</style> 

以上代码通过给容器设置display: flex以及justify-content和align-items属性设置实现了水平和垂直居中。因此，两个盒子的中线实现了对齐。