如何实现flex容器屏幕居中适配及子元素等高布局

问题梳理 #

• Flex容器始终无法在屏幕居中显示
• 移动端下容器内两个div高度不一致
• 上传按钮无法相对Flex容器居中
• 左右箭头未垂直对齐容器高度

修改后的HTML代码 #

<div class="bg-image"></div>

<!-- 新增外层容器统一控制居中与按钮位置 -->
<div class="main-wrapper">
  <div class="flex-container">
    <div class="left arrow">
      <button class="btn" style="background-color: azure; border: 2px solid black;" id="left"><i class="fas fa-angle-double-left"></i></button>
    </div>
    <div class="bg-text" id="first_div">
      <h4><u>Newspaper particulars</u><i class="fa fa-sign-out" style="float: right; cursor: pointer;"></i></h4><br>
      <ul>
        <li><label for="date">Select date</label><br></li>
        <input type="date" id="date" name="date" style="text-align: center; width: 100%;"><br><br>
        <li><label for="unit">Select division</label><br></li>
        <select name="unit" id="unit" style="width: 100%; text-align: center;">
          <option value="default" id="default">Click to select</option>
          <option value="HQ">HQ</option>
        </select><br><br>
        <li><label for="cat">Select news category</label><br></li>
        <div id="cat" style="border: 2px solid white; padding: 5px;">
          <input type="radio" id="newspaper" name="category" value="News paper">
          <label for="newspaper">News paper</label><br>
          <input type="radio" id="newsportal" name="category" value="News portal">
          <label for="newsportal">News portal</label><br>
          <input type="radio" id="socialmedia" name="category" value="Social media">
          <label for="socialmedia">Social media</label>
        </div>
      </ul>
    </div>
    <div class="para" id="second_div">
      <div class="container">
        <span id="preview_text" style="text-align: center; vertical-align: middle; color: red;">Image preview</span>
      </div>
    </div>
    <div class="right arrow">
      <button class="btn" style="background-color: azure; border: 2px solid black;" id="right"><i class="fas fa-angle-double-right"></i></button>
    </div>
  </div>
  <div id="but">
    <button type="button" class="btn btn-primary btn-block">Upload</button>
  </div>
</div>

修改后的CSS代码 #

/* 重置默认边距，消除浏览器默认样式干扰 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  overflow: auto;
}

.bg-image {
  background-image: url("/background.jpg");
  filter: blur(8px);
  -webkit-filter: blur(8px);
  height: 100%; 
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}

.main-wrapper {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.flex-container {
  display: flex;
  align-items: stretch; /* 强制所有子元素高度一致 */
  gap: 15px; /* 子元素间留间距，避免拥挤 */
  width: 100%;
  max-width: 1200px; /* 限制最大宽度，适配大屏显示 */
}

.left.arrow, .right.arrow {
  display: flex;
  align-items: center; /* 箭头按钮垂直居中于容器高度 */
  justify-content: center;
  padding: 10px;
}

.bg-text {
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0, 0.4);
  color: white;
  font-weight: bold;
  border: 3px solid #f1f1f1;
  padding: 20px;
  flex: 1; /* 自动分配剩余空间，和preview区按比例分配宽度 */
  min-width: 280px; /* 移动端最小宽度，避免内容被挤压 */
}

.para {
  background-color: rgba(0,0,0, 0.4);
  color: white;
  font-weight: bold;
  border: 3px solid #f1f1f1;
  padding: 10px;
  flex: 2; /* 占比大于表单区，适配预览需求 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.container {
  width: 100%;
  text-align: center;
}

#preview_text {
  line-height: 1.5; /* 替换固定行高，适配不同容器高度 */
  padding: 40px 20px;
}

#but {
  margin-top: 30px; /* 和flex容器保持固定间距 */
  width: 100%;
  max-width: 300px; /* 限制按钮宽度，避免过宽 */
}

/* 移动端适配：屏幕小于768px时触发 */
@media (max-width: 768px) {
  .flex-container {
    flex-direction: column; /* 改为垂直布局，避免横向拥挤 */
  }
  .left.arrow, .right.arrow {
    order: -1; /* 箭头移到最顶部 */
    flex-direction: row;
    justify-content: space-between;
  }
}

关键修改说明 #

1. Flex容器居中：新增main-wrapper外层容器，用flex-direction: column+align-items: center+justify-content: center实现整体垂直水平居中，同时给html/body设置100%高度，确保容器能占满视口。
2. 子元素等高：给flex-container添加align-items: stretch，配合flex属性给两个核心div分配宽度比例，强制二者高度完全一致。
3. 按钮定位：把上传按钮移到flex容器外面，通过margin-top控制间距，用max-width限制按钮宽度，自然实现相对容器居中。
4. 箭头垂直居中：给箭头div设置display: flex+align-items: center，让按钮自动对齐容器的垂直中线。
5. 移动端适配：添加媒体查询，小屏幕下改为垂直布局，调整箭头位置避免内容挤压，提升移动端体验。

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