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

CSS 利用 position + margin 实现固定盒子横向纵向居中的方法是一种常用的布局方式，具有广泛的应用场景。这种方法通过对盒子的定位和尺寸进行调整，实现对盒子的水平和垂直居中对齐。

下面是具体的攻略与两条示例说明：

攻略

1. 设置盒子的宽度和高度，并将盒子的定位方式设为绝对定位。
2. 设置盒子的 top、left、bottom、right 属性值为 0，这样可以使盒子与父元素的四个边框对齐。
3. 设置盒子的 margin:auto 属性值，这样可以使盒子在父元素中水平垂直居中。

示例1：水平垂直居中的div

以下是一个水平垂直居中的 div 的实现：

<div class="container">
  <div class="centered-div">
    <p>这是居中的 div</p>
  </div>
</div>

.container {
  height: 200px;
  width: 200px;
  position: relative;
  background-color: #f5f5f5;
}

.centered-div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: auto;
  text-align: center;
}

在上述代码中，我们首先创建了一个相对定位的 .container 容器，并将其尺寸设为 200px 的正方形。然后，我们在容器中创建了一个绝对定位的 .centered-div，并设置其宽度和高度为 100%，这样 .centered-div 就会占据整个父元素的空间。

接着，我们利用 margin:auto 将 .centered-div 水平和垂直居中对齐。

示例2：水平垂直居中的图片

以下是一个水平垂直居中的图片的实现：

<div class="container">
  <img class="centered-img" src="https://picsum.photos/200/200" alt="随机图片">
</div>

.container {
  height: 200px;
  width: 200px;
  position: relative;
  background-color: #f5f5f5;
}

.centered-img {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
}

在上述代码中，我们首先创建了一个相对定位的 .container 容器，并将其尺寸设为 200px 的正方形。然后，我们在容器中创建了一个绝对定位的 img 元素，并设置其 top、left、bottom 和 right 属性值为 0，这样 img 就会占据整个父元素的空间。

接着，我们利用 margin:auto 将 img 水平和垂直居中对齐，并设置 max-width 和 max-height 为 100%，使其在容器中不会溢出。