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

在HTML中，一个盒子是指一个被包裹在盒子模型（box model）中的内容区域（content area），而盒子模型由content、padding、border、和margin四个部分组成。在CSS中，通过样式定义来控制盒子的外观和布局，其中一个重要的概念就是盒子的居中对齐方式。（下面将使用pre标记展示CSS代码示例）

当需要将两个盒子垂直居中时，可以使用以下代码

.parent {
  display: flex;
  flex-direction: column;
  justify-content: center;
} 

这个方法可以将父级盒子的子元素纵向居中，其中display: flex;将父级盒子指定为弹性盒子布局，flex-direction: column;指定其为竖直方向，justify-content: center;将子元素设置为垂直居中。

如果要将两个盒子水平居中，则可以使用以下代码：

.parent {
  display: flex;
  justify-content: center;
}

.child {
  margin: 0 auto;
} 

此方法中，display: flex;使父级盒子为弹性盒子布局，justify-content: center;使子元素水平方向居中。在子元素中，margin: 0 auto;将左右外边距设置为自动，从而使其水平居中对齐。

总之，CSS提供了多种居中对齐方式的方法，可以根据实际需求选择合适的方式来布局网页中的盒子元素。