[分享]css两个块元素对齐居中显示

CSS是网页前端开发中必不可少的技术之一。其中，块元素的居中对齐是一个常见问题。通过以下两种方法，我们可以轻松地实现块元素的居中对齐显示。 方法一：使用Flex布局 Flex布局可以使得父元素的子元素...

CSS是网页前端开发中必不可少的技术之一。其中，块元素的居中对齐是一个常见问题。通过以下两种方法，我们可以轻松地实现块元素的居中对齐显示。
方法一：使用Flex布局
Flex布局可以使得父元素的子元素沿着主轴（默认为水平方向）居中对齐。在CSS中，我们可以设置以下属性来实现这一效果：

css
.parent {
  display: flex;
  justify-content: center; /* 沿着主轴居中对齐 */
  align-items: center; /* 沿着辅轴居中对齐 */
} 

这样设置之后，parent元素中的子元素就会沿着主轴和辅轴居中对齐。这个方法适用于父元素的宽度和高度都已知的情况。
方法二：使用absolute定位
使用absolute定位可以使得子元素相对于父元素进行定位。因为绝对定位不会占用页面的任何空间，所以我们可以通过设置子元素的LEFT、RIGHT、TOP和BOTTOM属性来实现子元素的居中对齐。

css
.parent { position: relative; } /* 父元素设置为相对定位 */
.child {
  position: absolute;
  top: 50%; /* 距离上边界距离为父元素高度的一半 */
  left: 50%; /* 距离左边界距离为父元素宽度的一半 */
  transform: translate(-50%, -50%); /* 微调 */
} 

这样，子元素就会居中显示在父元素中央。需要注意的是，如果父元素没有明确设置宽度或高度，则子元素会在页面中央上显示。
以上是两种常见的CSS块元素居中对齐的方法，可以让网页在对齐方面显得更加美观和整洁。在实际开发中，需要根据实际情况进行选择。