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

使用CSS实现两个盒子居中对齐是Web开发中比较常见的一项任务。本文将介绍一些实现方法。 首先，我们需要在HTML中定义两个盒子。如下所示： Box 1 Box 2 在CSS中，我们可以使用fle...

使用CSS实现两个盒子居中对齐是Web开发中比较常见的一项任务。本文将介绍一些实现方法。
首先，我们需要在HTML中定义两个盒子。如下所示：

<div class="container">
  <div class="box1">Box 1</div>
  <div class="box2">Box 2</div>
</div> 

在CSS中，我们可以使用flexbox布局来轻松实现盒子的居中对齐。具体做法是在容器上应用display: flex; 和justify-content: center;属性。同时，我们还需要针对盒子定义align-items: center;属性，以确保它们垂直居中。

.container {
  display: flex;
  justify-content: center;
}
<br>
.box1, .box2 {
  align-items: center;
} 

这样，我们就实现了两个盒子的居中对齐。完整的代码如下：

<div class="container">
  <div class="box1">Box 1</div>
  <div class="box2">Box 2</div>
</div>
<br>
<style>
.container {
  display: flex;
  justify-content: center;
}
<br>
.box1, .box2 {
  align-items: center;
}
</style> 

除了使用flexbox布局，我们还可以使用position属性实现盒子的居中对齐。具体做法是将容器的position属性设置为relative，然后利用盒子的position属性和top、left属性来实现盒子的居中对齐。

.container {
  position: relative;
}
<br>
.box1, .box2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
} 

这样，我们就成功地使用CSS实现了两个盒子的居中对齐。希望本文能对你有所帮助。