我有这个代码：
我的小提琴：https://jsfiddle.net/v5j3L6e9/
基本上，我有 6 个盒子（带有图像和文本的 Div）。
我试图将“底部区域”居中（例如，这可以是液体布局，顶部区域作为标题，然后是主要内容，具有最大宽度）
这个想法是“bottomzone”具有固定的最大宽度，因此当分辨率较大时，它应该保持居中（同时“topzone”将随着分辨率宽度而扩展）。
我不明白如何在不破坏盒子定位的情况下使底部区域居中（盒子必须保持分布并保持居中）。
另外，不确定我是否做了一个好的元素层次结构（在 html+css 上相当新）。
谢谢。
.topzone {
height: 100px;
background-color: blue;
}
.topzone h1 {
text-align: center;
}
.bottomzone {
margin-top: 50px;
max-width: 800px;
text-align: center;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.bottomzone div {
position: relative;
width: 30%;
margin: 0px 10px 0px 10px;
}
.bottomzone img {
width: 100%;
}
.bottomzone div h3 {
position: absolute;
top: 20px;
width: 100%;
}
<div class="topzone">
<h1>Title 1</h1>
<h2>Title 2</h2>
</div>
<div class="bottomzone">
<div>
<img src="https://etc.usf.edu/clipart/21900/21988/square_21988_md.gif" alt="Just a box">
<h3>Box 1</h3>
</div>
<div>
<img src="https://etc.usf.edu/clipart/21900/21988/square_21988_md.gif" alt="Just a box">
<h3>Box 2</h3>
</div>
<div>
<img src="https://etc.usf.edu/clipart/21900/21988/square_21988_md.gif" alt="Just a box">
<h3>Box 3</h3>
</div>
<div>
<img src="https://etc.usf.edu/clipart/21900/21988/square_21988_md.gif" alt="Just a box">
<h3>Box 4</h3>
</div>
<div>
<img src="https://etc.usf.edu/clipart/21900/21988/square_21988_md.gif" alt="Just a box">
<h3>Box 5</h3>
</div>
<div>
<img src="https://etc.usf.edu/clipart/21900/21988/square_21988_md.gif" alt="Just a box">
<h3>Box 6</h3>
</div>
</div>
一只名叫tom的猫
江户川乱折腾
相关分类