怎么让div盒子居中

### 使用Flexbox实现Div元素水平垂直居中

对于希望使`<div>`元素在其父容器内既水平又垂直居中的场景，采用CSS Flexbox布局是一种高效的方法。通过将父容器的`display`属性设为`flex`并利用`justify-content`和`align-items`两个属性可以轻松达成目标。

.parent {
    display: flex;
    justify-content: center; /* 子元素沿主轴（默认横向）中心对齐 */
    align-items: center;     /* 子元素沿交叉轴（纵向）中心对齐 */
}

当需要确保子元素位于整个视窗中央时，则需进一步设定父容器的高度与宽度使其占据全屏空间：

html, body {
    height: 100%;
}

.parent {
    min-height: 100vh;       /* 设置最小高度等于浏览器窗口高 */
    width: 100%;             /* 宽度占满整个屏幕 */
    display: flex;
    justify-content: center;
    align-items: center;
}

此方法适用于大多数现代浏览器，并且具有良好的兼容性和简洁性[^1]。

### 利用Table Cell特性实现居中效果

另一种常见的做法是借助表格单元格(`table-cell`)的行为特征来完成同样的任务。这种方式主要依赖于设置外层包裹器作为模拟表格行的表现形式，并赋予内部实际要居中的对象类似于表格单元格的角色，再配合特定样式达到预期目的。

.parent {
    display: table-cell;
    vertical-align: middle;  /* 控制内容垂直方向上的位置 */
    text-align: center;      /* 如果包含的是inline-level的内容则可控制其水平居中 */
    height: 100vh;           /* 占据整个视口高度 */
}

这种方法同样能有效地处理不同类型的嵌套结构，在某些情况下可能更易于理解和维护[^2]。