div垂直水平居中

### 实现 div 元素垂直和水平居中的 CSS 方法 以下是几种常见的实现 div 元素垂直和水平居中的方法： #### 1. 使用表格布局 (Table Layout) 通过将父容器设置为 `display: table`，并将子元素设置为 `display: table-cell` 和 `vertical-align: middle` 来实现垂直居中。同时利用 `text-align: center` 完成水平居中。 ```html <div class="box1"> <div class="box2">我要水平垂直居中</div> </div> <style> .box1 { width: 400px; height: 400px; background-color: yellow; text-align: center; /* 水平居中 */ display: table; /* 设置为表格显示模式 */ } .box2 { background-color: red; display: table-cell; /* 子元素作为单元格 */ vertical-align: middle; /* 垂直居中 */ } </style> ``` 这种方法适用于静态高度宽度的情况[^2]。 --- #### 2. 使用弹性盒子模型 (Flexbox) Flexbox 是一种强大的布局工具，可以通过简单的属性组合轻松实现垂直和水平居中。 ```html <div class="container"> <div class="item">我要水平垂直居中</div> </div> <style> .container { display: flex; /* 启用 Flexbox */ justify-content: center;/* 主轴方向上居中(水平) */ align-items: center; /* 交叉轴方向上居中(垂直) */ width: 400px; height: 400px; background-color: yellow; } .item { background-color: red; } </style> ``` 这种方式简单直观，适合现代浏览器环境下的开发需求[^4]。 --- #### 3. 使用绝对定位与变换 (Absolute Positioning and Transform) 通过结合 `position: absolute` 和 `transform` 属性来动态调整位置，从而达到精确的中心对齐效果。 ```html <div class="parent"> <div class="child">我要水平垂直居中</div> </div> <style> .parent { position: relative; /* 创建相对定位上下文 */ width: 400px; height: 400px; background-color: yellow; } .child { position: absolute; /* 绝对定位 */ top: 50%; /* 移动到顶部中间 */ left: 50%; /* 移动到左侧中间 */ transform: translate(-50%, -50%);/* 抵消自身的宽高偏移量 */ background-color: red; } </style> ``` 该方案兼容性较好，在旧版浏览器中也能正常工作。 --- #### 4. 使用网格布局 (Grid Layout) CSS Grid 提供了一种更现代化的方式来进行二维空间内的布局控制。 ```html <div class="grid-container"> <div class="grid-item">我要水平垂直居中</div> </div> <style> .grid-container { display: grid; /* 启用网格布局 */ place-items: center; /* 自动完成行列双向居中 */ width: 400px; height: 400px; background-color: yellow; } .grid-item { background-color: red; } </style> ``` 这是目前最简洁的方法之一，尤其适合复杂的多维布局场景。 --- #### 总结 以上四种方法各有优劣： - **表格布局**：语义清晰但灵活性较低。 - **Flexbox**：语法简单易懂，推荐用于单向或多项目排列。 - **绝对定位加变换**：兼容性强，适配老旧设备。 - **Grid 布局**：功能强大，特别适合复杂页面结构设计。 具体选择取决于实际应用场景以及目标用户的浏览器支持情况。