flex中div居中

在 Flexbox 布局中，让一个 `div` 元素水平和垂直居中通常有几种方法。以下是一些常见的实现：

1. **使用 `justify-content` 和 `align-items` 属性**:
在容器上设置 `display: flex;`，然后使用以下属性来实现居中：

   .container {
     display: flex;
     justify-content: center; /* 水平居中 */
     align-items: center; /* 垂直居中 */
   }

如果你只想要单方向居中（例如，水平居中但不垂直居中），则分别设置对应的属性。

2. **将 `div` 设置为 `flex-item`**:
将你的 `div` 放入一个具有 `display: flex` 的父元素，并确保它本身是 `align-self: center;` 或者设置其 `flex: 1;` 来填充可用空间：

   .flex-item {
     display: flex;
     align-self: center; /* 或 flex: 1; */
   }

3. **使用 Flexbox 中的 `margin` 或 `padding` 居中**:
可以给 `div` 设置 `margin: auto` 来自动计算两边的内边距以达到居中效果，但这仅适用于没有明确宽度的情况。如果需要指定宽度，可以结合 `left: 0; right: 0;` 等。

   .centered-div {
     margin: auto;
   }

相关问题--
1. 如何在 Flexbox 中实现绝对定位的元素居中？
2. Flexbox 中的 `auto-fit` 和 `auto-fill` 与居中有什么区别？
3. Flexbox 居中是否兼容所有浏览器？