[分享]css两个板块怎么水平居中

CSS 中水平居中是一个常见的问题，特别是对于两个板块要水平居中的情况，下面就来简单介绍一下两种方法。/ 第一种方法：使用 flexbox / .container { display: flex; ...

CSS 中水平居中是一个常见的问题，特别是对于两个板块要水平居中的情况，下面就来简单介绍一下两种方法。

/* 第一种方法：使用 flexbox */
.container {
  display: flex;
  justify-content: center;
}

/* 第二种方法：使用绝对定位 */
.wrapper {
  position: relative; /* 确保父元素有 position 属性 */
}

.block1, .block2 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
} 

第一种方法是使用 flexbox 来实现两个板块水平居中，需要在父元素上设置 display: flex; 属性，并使用 justify-content: center; 居中子元素。

第二种方法是使用绝对定位，让两个板块都相对于父元素定位，然后分别设置 left: 50%; 属性以及 transform: translateX(-50%); 属性，使它们水平居中。

以上两种方法在一般情况下都可以有效地实现两个板块的水平居中。需要注意的是，第二种方法需要确保父元素有 position 属性，否则无法使用相对定位。