css怎么给div居中

CSS中给`<div>`元素居中有多种方法，以下是常见的几种：

1. **内联元素**（如`<span>`、`<p>`等）水平垂直居中：
使用 Flexbox 或 Grid 系统：

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

或者使用绝对定位配合 `top`, `right`, `bottom`, `left: 50%` 再做偏移：

   .container {
     position: relative;
   }
   .centered-div {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
   }

2. **块级元素**（如`<div>`）仅水平居中：
使用 `margin: auto;`：

   .container {
     text-align: center;
   }
   .centered-div {
     margin: 0 auto;
   }

或者使用Flexbox：

   .container {
     display: flex;
     justify-content: center;
   }
   .centered-div {
     display: inline-block;
   }

3. **仅垂直居中**：
可以利用Flexbox 的 `align-self: center` 或者伪元素 `::before` 和 `::after` ：

   .vertical-center {
     display: flex;
     align-items: center;
   }

   .vertically-centered-div {
     min-height: 100px; /* 防止塌陷 */
   }

请注意选择适合你的布局和兼容性的方法，并确保`div`已经包含在一个合适的容器（如`.container`）中。