怎么让一个 div 水平垂直居中

要使一个 div 在其父容器中水平和垂直居中，有多种方法可行，取决于具体的布局需求和 CSS 属性的使用。下面列举了几种常见的方法：

1. Flexbox 方法

使用 Flexbox 是当前最流行且简洁的方法之一。

<div class="container">
    <div class="centered">居中内容</div>
</div>

.container {
   
    display: flex;              /* 激活 Flexbox */
    align-items: center;       /* 垂直居中 */
    justify-content: center;   /* 水平居中 */
    height: 100vh;            /* 让容器充满视口高度 */
}

.centered {
   
    /* 可以添加任何样式 */
}

2. Grid 方法

使用 CSS Grid 也可以很简单地实现居中。

<div class="grid-container">
    <div class="centered">居中内容</div>
</div>

.grid-container {
   
    display: grid;             /* 激活 Grid */
    height: 100vh;           /* 让容器充满视口高度 */
    place-items: center;      /* 水平和垂直居中 */
}

.centered {
   
    /* 可以添加任何样式 */
}

3. 绝对定位方法

通过绝对定位也是一种常见的方法。

<div class="relative-container">
    <div class="absolutely-centered">居中内容</div>
</div>

.relative-container {
   
    position: relative;       /* 设置定位上下文 */
    height: 100vh;          /* 让容器充满视口高度 */
}

.absolutely-centered {
   
    position: absolute;       /* 绝对定位 */
    top: 50%;                 /* 距离顶部50% */
    left: 50%;                /* 距离左侧50% */
    transform: translate(-50%, -50%); /* 通过平移将元素偏移自身宽高的一半 */
}

4. 传统的文本居中方法（适用于已知高度）

如果 div 的高度是固定的，可以使用 line-height 属性。

<div class="fixed-height-container">
    <div class="line-height-centered">居中内容</div>
</div>

.fixed-height-container {
   
    height: 300px;           /* 固定高度 */
    text-align: center;      /* 水平居中 */
}

.line-height-centered {
   
    line-height: 300px;      /* 行高等于容器高度 */
}

5. 使用 CSS 表格布局

这种方法也有效，虽然不如 Flexbox 和 Grid 高效。

<div class="table-container">
    <div class="table-cell-centered">居中内容</div>
</div>

.table-container {
   
    display: table;
    height: 100vh;          /* 让容器充满视口高度 */
    width: 100%;            /* 宽度设为100% */
}

.table-cell-centered {
   
    display: table-cell;
    vertical-align: middle; /* 垂直居中 */
    text-align: center;      /* 水平居中 */
}

总结

以上这些方法都可以实现 div 的水平和垂直居中。根据项目的需求和兼容性要求，可以选择最适合的方法。如果浏览器支持，推荐使用 Flexbox 或 Grid 方法，它们具有更好的灵活性和简便性。