一个div内放置两个div模块,如何让子div模块换行且垂直水平居中再父div模块内
时间: 2023-07-05 07:36:45 浏览: 97
让Div层上下左右都居中的方法
5星 · 资源好评率100%
你可以使用 flexbox 布局来实现在一个 div 中放置两个子 div 模块,并使它们在需要时自动换行,并且垂直水平居中在父 div 模块内。以下是 HTML 和 CSS 示例代码:
HTML 代码:
```html
<div class="container">
<div class="box">
<!-- 第一个子 div 模块 -->
</div>
<div class="box">
<!-- 第二个子 div 模块 -->
</div>
</div>
```
CSS 代码:
```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 模块的背景色等属性。
阅读全文