[分享]css两个不同的框中心点一样

CSS中，可以通过设置不同的宽度和高度，来构建各种不同形状和大小的框。但是，当我们需要将两个不同的框水平或垂直居中对齐时，可能会遇到一些麻烦。下面我们就来探讨一下，如何让两个不同的框中心点一样。.bo...

CSS中，可以通过设置不同的宽度和高度，来构建各种不同形状和大小的框。但是，当我们需要将两个不同的框水平或垂直居中对齐时，可能会遇到一些麻烦。下面我们就来探讨一下，如何让两个不同的框中心点一样。

.box1 {
  width: 100px;
  height: 100px;
  background-color: red;
}

.box2 {
  width: 150px;
  height: 150px;
  background-color: blue;
} 

上述代码中，我们定义了两个不同颜色的方框，分别为红色和蓝色，大小也不同。如果想让这两个方框水平居中对齐，可以使用以下代码：

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

.box1, .box2 {
  align-self: center;
} 

通过将两个方框放在一个容器(wrapper)内，使用flex布局，设置justify-content为center，就可以让两个方框水平居中对齐。同时，我们还为.box1和.box2设置了align-self属性，让它们在交叉轴上居中。

如果想要让两个方框垂直居中对齐，可以使用以下代码：

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

.box1, .box2 {
  align-self: center;
} 

在上述代码中，我们通过设置align-items为center，让两个方框在主轴上居中。同时，我们仍然需要使用align-self属性，让它们在交叉轴上居中。

总结一下，通过使用flex布局和align-self属性，我们可以让两个不同的框中心点一样，实现水平或垂直居中对齐。