如何使div内容居中

让`<div>`元素的内容居中有几种常见的方法：

1. **内联样式**：
如果你想简单快速地设置，可以使用CSS的`text-align`属性。例如：

   <div style="text-align: center;">这是居中的内容</div>

2. **行内块级元素**：
对于块级元素（如`<div>`），你可以设置其父容器的`display`属性为`flex`，然后应用`align-items: center;`：

   <style>
   .parent {
     display: flex;
     align-items: center;
   }
   </style>
   <div class="parent">
     这是居中的内容
   </div>

3. **常规布局**：
使用传统的CSS布局，给`<div>`设置宽度，并将`margin`属性设置为`auto`，它会在水平方向上自动调整空白：

   div {
     width: 200px; /* 或自适应 */
     margin: 0 auto;
   }

4. **Flexbox布局**：
如果你的项目支持 Flexbox，那么可以直接将`.div`元素本身设为`display: flex; justify-content: center; align-items: center;`：

   <div class="flex-center">
     这是居中的内容
   </div>
   <style>
   .flex-center {
     display: flex;
     justify-content: center;
     align-items: center;
   }
   </style>