如何水平对齐居中两个div并实现响应式布局？

我需要实现如图所示的布局效果：两个字段需水平对齐且具备灵活性，计划将这两个字段设置为一个父div下的两个子div。现咨询：如何水平对齐并居中这两个div，同时实现响应式布局？

以下是我尝试编写的代码：

尝试的CSS代码 #

.parentField {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
  border: 1px solid black;
  width: 50%;
}

.field1 {
  margin: 10px;
  border: 1px solid red;
}

.field2 {
  margin: 10px;
  border: 1px solid red;
}

.browse {
  background-color: green;
  color: white;
  width: 80px;
  height: 30px;
  margin-bottom: -500%;
  margin-left: 80%;
  margin-top: -500%;
}

.text {
  text-align: center;
  margin: 0 auto;
  padding-top: 14px;
  font-size: small;
  padding-right: 80px;
}

.or {
  text-align: center;
  margin-top: -30px;
}

.text1 {
  text-align: center;
  margin: 0 auto;
  padding-top: 14px;
  font-size: small;
  padding-right: 80px;
}

.browse1 {
  background-color: green;
  color: white;
  width: 80px;
  height: 30px;
  margin-bottom: 60px;
}

尝试的HTML代码 #

<div class="parentField">
  <div class="field1">
    <p class="text">Upload a Power Point presentation .pptx .pptm .ppt</p>
    <button class="browse">Browse</button>
  </div>
  <p class="or">or</p>
  <div class="field2">
    <p class="text1">Upload a Word document .doc .docm .docx</p>
    <button class="browse1">Browse</button>
  </div>
</div>

解决方案 #

你的代码存在grid布局列数与子元素数量不匹配、负margin导致布局混乱、缺乏响应式处理等问题。以下是优化后的实现方案：

优化后的CSS代码 #

/* 父容器：三列grid布局，左右自适应，中间放"或"，整体居中 */
.parentField {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-gap: 20px;
  border: 1px solid black;
  width: 80%;
  margin: 0 auto;
  align-items: center;
  padding: 20px;
}

/* 子字段：flex垂直排列内容，居中对齐 */
.field1, .field2 {
  border: 1px solid red;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* 统一按钮样式 */
.browse, .browse1 {
  background-color: green;
  color: white;
  width: 80px;
  height: 30px;
  border: none;
  cursor: pointer;
}

/* 统一文本样式 */
.text, .text1 {
  text-align: center;
  font-size: small;
  margin: 0;
}

.or {
  font-weight: bold;
  margin: 0;
}

/* 响应式处理：小屏幕下改为垂直排列 */
@media (max-width: 768px) {
  .parentField {
    grid-template-columns: 1fr;
    grid-template-areas: 
      "field1"
      "or"
      "field2";
  }
  .field1 { grid-area: field1; }
  .or { grid-area: or; }
  .field2 { grid-area: field2; }
}

优化后的HTML代码（文本已汉化） #

<div class="parentField">
  <div class="field1">
    <p class="text">上传PowerPoint演示文稿 .pptx .pptm .ppt</p>
    <button class="browse">浏览</button>
  </div>
  <p class="or">或</p>
  <div class="field2">
    <p class="text1">上传Word文档 .doc .docm .docx</p>
    <button class="browse1">浏览</button>
  </div>
</div>

关键修改点： #

• 父容器改用三列grid布局，让两个字段和中间的"或"自然水平排列，通过margin: 0 auto实现整体居中
• 子字段用flex垂直排列文本和按钮，通过gap控制间距，替代不稳定的负margin和冗余padding
• 添加媒体查询，在屏幕宽度小于768px时自动切换为垂直布局，实现响应式效果
• 统一按钮和文本样式，减少冗余代码

内容的提问来源于stack exchange，提问作者Donko Tonev