div垂直居中

### 使用 CSS 实现 DIV 垂直居中的方法 以下是几种常见的实现 `div` 元素垂直居中的方法： #### 方法一：Flexbox 布局 通过设置父容器的 `display: flex` 属性以及子元素的相关属性可以轻松实现垂直居中。 ```css <style> .boxFather { display: flex; align-items: center; /* 控制垂直方向上的居中 */ justify-content: center; /* 可选，控制水平方向上的居中 */ height: 300px; /* 设置高度以便观察效果 */ border: 1px solid black; } .box1 { width: 100px; height: 100px; background-color: red; } </style> <div class="boxFather"> <div class="box1"></div> </div> ``` 这种方法简单直观，适用于现代浏览器环境[^2]。 --- #### 方法二：绝对定位与 Transform 此方法利用了 `position: absolute` 和 `transform` 的组合来调整子元素的位置。 ```css <style> .outer { width: 500px; height: 500px; background-color: rgb(158, 177, 194); position: relative; } .box { position: absolute; top: 50%; left: 50%; /* 如果只需要垂直居中，则可省略这一句 */ transform: translate(-50%, -50%); width: 200px; height: 200px; background-color: skyblue; } </style> <div class="outer"> <div class="box"></div> </div> ``` 这种方式兼容性较好，在不支持 Flexbox 的旧版浏览器中也能正常工作[^3]。 --- #### 方法三：表格布局 (Table Cell) 借助 CSS 中的 `display: table-cell` 特性也可以完成垂直居中操作。 ```css <style> .table-container { display: table; width: 100%; height: 300px; /* 定义容器的高度 */ border: 1px solid black; } .cell { display: table-cell; vertical-align: middle; /* 关键属性 */ text-align: center; /* 若需水平居中则加上这句 */ background-color: lightgreen; width: 100px; height: 100px; } </style> <div class="table-container"> <div class="cell">内容</div> </div> ``` 这种技术适合某些特定场景下的应用，但在灵活性方面不如前两种方式[^1]。 --- ### 总结 以上三种方案各有优劣，具体选择取决于实际需求和目标用户的设备特性。对于大多数项目而言，推荐优先考虑 **Flexbox** 方案因其简洁性和强大的功能覆盖范围；而当面对较低版本 IE 浏览器时可能需要回退到其他替代策略如 Absolute Positioning 或 Table Layouts。