div 与div 上下居中

要实现div与div上下居中，可以采用以下方法：

1. 使用Flexbox布局：在外层的容器div上添加display: flex和align-items: center属性，这样可以使内部的div在垂直方向上居中对齐。

2. 使用绝对定位和transform属性：给外层的容器div设置position: relative属性，然后给内部的div设置position: absolute和top: 50%属性，再使用transform: translateY(-50%)将div向上偏移自身高度的一半，实现垂直居中。

3. 使用表格布局：将外层的容器div的display属性设置为table，然后将内部的div的display属性设置为table-cell，并使用vertical-align: middle使其垂直居中。

4. 使用CSS Grid布局：在外层的容器div上设置display: grid和align-items: center属性，内部的div会垂直居中。

这些方法都可以实现div与div的上下居中，具体选择哪种方法取决于你的具体需求和使用场景。可以根据文档和实例[2]中提供的代码样例进行实践和学习。<span class="em">1</span><span class="em">2</span>
#### 引用[.reference_title]
- *1* [DIV居中及DIV垂直居中.html](https://download.csdn.net/download/ssxueyi/11182495)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* [网页设计作业成品文档(HTML+CSS+JS).docx](https://download.csdn.net/download/arthas777/88240442)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]