vue div上下居中

在Vue中实现div的上下居中有多种方法。其中一种方法是使用flex布局。您可以在div的父容器上添加display:flex; align-items:center;的样式，这样子元素就会在垂直方向上居中对齐。具体代码如下：

<div class="parent">
  <div class="child">内容</div>
</div>

.parent {
  display: flex;
  align-items: center;
  justify-content: center;
}

这样子元素就会在div的中央垂直居中对齐了。<em>1</em><em>2</em><em>3</em>
#### 引用[.reference_title]
- *1* [div上下左右居中](https://blog.csdn.net/weixin_42282391/article/details/88593833)[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^v92^chatsearchT3_1"}} ] [.reference_item]
- *2* [转：div中内容上下居中小结](https://blog.csdn.net/mao_mao37/article/details/90409645)[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^v92^chatsearchT3_1"}} ] [.reference_item]
- *3* [Vue css各种居中显示、固定在屏幕某个位置](https://blog.csdn.net/sinat_24918465/article/details/103288094)[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^v92^chatsearchT3_1"}} ] [.reference_item]
[ .reference_list ]