margin 居中

margin 属性主要用于设置元素周围的外边距，它并不直接用于居中对齐。如果你想让某个元素水平或垂直居中，你可以考虑以下几种方法：

1. **Flexbox**：对于现代浏览器，可以使用 display: flex; 和 justify-content: center 或 align-items: center; 来实现元素在容器内的居中。

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

2. **Grid布局**：类似 Flexbox，如果容器是 grid 容器，则可以使用 align-items: center; 和 justify-self: center;。

.container {
  display: grid;
  place-items: center;
}

3. **Positioning + transform**：对于相对定位元素，可以结合 top: 50%; transform: translateY(-50%); 实现垂直居中。

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

4. **CSS Grid + padding/padding-bottom hack**: 对于一些旧版浏览器，可以利用 grid 然后通过负 padding 来调整元素位置。

5. **Table layout**：如果你希望元素像表格一样排列，可以使用 `display: table` 和 `vertical-align: middle`。

.parent {
  display: table;
}

.child {
  vertical-align: middle;
}