css div内容居中

CSS 中让 `div` 内容居中的方法有多种：

1. **水平居中**：
- 使用 `text-align` 属性设置父元素（通常是一个容器，如 `div`）的文本对齐方式为 `center`：

     .container {
       text-align: center;
     }

- 如果 `div` 是块级元素，还可以直接给 `div` 设置 `margin: auto` 来使其左右自动对齐于其父元素：

     .centered-div {
       margin: auto;
     }

2. **垂直居中**：
- 使用 Flexbox 或 Grid 容器布局：
- 对于 Flexbox，设置父容器为 `display: flex; justify-content: center; align-items: center;`：

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

- 对于 Grid，设置类似的方式：

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

3. **单行垂直居中（行内块级元素）**：
- 使用 `line-height` 和 `height` 相同，并且设置 `vertical-align: middle`：

     .vertical-centered {
       line-height: normal;
       height: 50px;
       vertical-align: middle;
     }

记得每个 `div` 都需要配合相应的样式调整才能达到居中效果，这取决于具体的页面布局需求。