flex布局让两个div水平居中垂直

Flex布局是一种现代CSS布局模型，它可以让元素更方便地进行响应式设计，特别是当需要在容器内灵活排列内容时。要使两个`<div>`水平居中并垂直居中，你可以使用以下CSS：

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;   /* 垂直居中 */
  height: 100%; /* 如果父容器有高度的话，设置其高度，或者设置成flex:1; 让内部div等高 */
}

.div1, .div2 {
  /* 这里可以省略，如果没有特定样式需要覆盖 */
}

这里的关键点在于将`.container`的display属性设为`flex`，然后分别设置justify-content和align-items属性来控制水平和垂直方向上的对齐方式。

对于`.div1`和`.div2`这两个具体的`<div>`元素，如果它们宽度和高度都是默认值，那么它们会自动适应并且相对于`.container`居中。如果你需要他们各自也有特定的尺寸，可以为它们添加宽度和高度。

相关问题

弹性布局让两个盒子水平居中

使用flex布局可以实现两个盒子水平居中。首先，创建一个父级容器，并将其设置为flex布局。然后，使用align-items属性将子项盒子纵向居中排列，使用justify-content属性将子项盒子横向居中排列。接下来，将子项盒子添加到父级容器中。这样，两个盒子就会水平居中于父级容器了。以下是具体的代码示例：

<style>
.father {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 其他样式属性 */
}

.son {
  /* 子项盒子样式 */
}
</style>

<div class="father">
  <div class="son">盒子居中</div>
</div>

这段代码中，`.father`类设置了display为flex，并使用align-items属性将子项盒子纵向居中，使用justify-content属性将子项盒子横向居中。`.son`类为子项盒子的样式。通过这样的设置，两个盒子就会水平居中于父级容器了。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [让盒子水平垂直居中的方法小结](https://blog.csdn.net/ddx2019/article/details/106840249)[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%"]
- *3* [父盒子设置弹性布局使子盒子垂直水平居中](https://blog.csdn.net/qq_43359222/article/details/127025332)[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 ]

一个div内放置两个div模块，如何让子div模块换行且垂直水平居中再父div模块内

你可以使用 flexbox 布局来实现在一个 div 中放置两个子 div 模块，并使它们在需要时自动换行，并且垂直水平居中在父 div 模块内。以下是 HTML 和 CSS 示例代码：

HTML 代码：

<div class="container">
  <div class="box">
    <!-- 第一个子 div 模块 -->
  </div>
  <div class="box">
    <!-- 第二个子 div 模块 -->
  </div>
</div>

CSS 代码：

.container {
  display: flex; /* 使用 flexbox 布局 */
  flex-wrap: wrap; /* 换行 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

.box {
  width: 200px; /* 子 div 模块的宽度 */
  height: 200px; /* 子 div 模块的高度 */
  margin: 10px; /* 子 div 模块的外边距 */
  background-color: #ccc; /* 子 div 模块的背景色 */
}

在上面的示例代码中，我们创建了一个名为 container 的父 div 模块，并在其中放置了两个名为 box 的子 div 模块。我们使用了 flexbox 布局，并设置了 flex-wrap 属性为 wrap，这样子 div 模块就可以在需要时自动换行。我们还设置了 justify-content 和 align-items 属性为 center，这样子 div 模块就可以垂直水平居中在父 div 模块内。

你可以根据你的需要调整子 div 模块的宽度、高度和外边距，以及父 div 模块的背景色等属性。