css 利用 position + margin 实现固定盒子横向纵向居中的方法

1. 什么是 position 和 margin？

在开始讨论利用 position 和 margin 实现固定盒子横向纵向居中的方法之前，我们先来了解一下 position 和 margin 的基本概念。

1.1 position

在 CSS 中，position 属性可以用来指定一个元素在文档中的定位方式。常用的 position 值有：

static：元素在文档中的正常流中定位。

relative：元素相对于其正常位置进行定位。

absolute：元素相对于其最近的非 static 祖先元素进行定位。

fixed：元素相对于视窗进行定位，即固定在页面中的某个位置。

1.2 margin

在 CSS 中，margin 属性用来指定元素的外边距。外边距是指元素与其相邻元素之间的空白区域。

2. 利用 position 和 margin 实现固定盒子横向居中

要实现固定盒子的横向居中，一种常见的方法是使用 position 属性和 margin 属性的组合。

首先，我们可以将要居中的盒子的 position 属性设置为 absolute，这样它就可以脱离文档流，并且相对于其最近的非 static 祖先元素进行定位。

接下来，我们可以通过设置左右外边距的值为 auto 来实现水平居中。

.center {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
}

在上面的代码中，我们将左边距和右边距都设置为 auto，这样浏览器会自动计算并分配剩余空间，从而使盒子水平居中。

3. 利用 position 和 margin 实现固定盒子纵向居中

要实现固定盒子的纵向居中，我们可以使用类似的方法。

首先，将要居中的盒子的 position 属性设置为 absolute，并且将上下外边距的值都设置为 auto。

.center {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}

在上面的代码中，我们将上边距和下边距都设置为 auto，这样浏览器会自动计算并分配剩余空间，从而使盒子纵向居中。

4. 利用 position 和 margin 实现固定盒子横向纵向居中的方法

要同时实现固定盒子的横向和纵向居中，我们可以将前面两种方法的代码进行合并。

.center {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

通过将上述代码应用到要居中的盒子上，我们就可以同时实现固定盒子的横向和纵向居中。

5. 总结

通过利用 position 属性和 margin 属性的组合，我们可以很方便地实现固定盒子的横向和纵向居中。在这种方法中，我们将要居中的盒子的 position 属性设置为 absolute，然后通过设置相应的边距值为 auto 来实现居中效果。