[分享]css两个盒子居中的方法

在CSS中，居中是常见的需求。本文将讨论两个常用的方法来居中两个盒子。

html：
<div class="parent">
  <div class="child1">Child 1</div>
  <div class="child2">Child 2</div>
</div>

方法1：
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

方法2：
.parent {
  position: relative;
}
.child1,
.child2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
} 

方法1使用了CSS的flexbox布局。设置父元素的display为flex，然后使用justify-content和align-items属性将子元素水平和垂直居中对齐。 方法2则使用了CSS的相对定位和绝对定位。首先设置父元素的position为relative，然后在子元素中设置position为absolute，并将top和left设置为50%。最后使用transform属性来使盒子水平和垂直居中对齐。