如何将提交按钮对齐到容器底部中央？求适配屏幕缩放的方案

我明白你想要的效果：让提交按钮始终贴在容器的底部中央，而且屏幕缩放时还能自动调整位置甚至换行。咱们来一步步解决这个问题，先看看现有代码里的问题，再给出修改方案。

问题分析 #

你之前用了position: absolute来定位按钮，但只设置了right:5px，所以按钮是靠右而不是居中。另外，父容器的flex布局方向是行（row），没法很好地把按钮推到底部。咱们换用flex的列布局来实现更稳定的效果。

修改方案 #

下面是调整后的CSS和HTML代码，核心思路是利用flex布局的特性让按钮自动“沉”到底部并居中：

修改后的CSS

#datails_container { 
  position: relative; 
  display: flex; 
  background-color: darkgrey; 
  width: 70%; 
  border-radius: 5px; 
  top: 50px; 
  margin: auto; 
  border-radius: 6px;
  /* 给容器设置最小高度，确保按钮有空间贴底 */
  min-height: 500px;
  padding: 20px 0;
}

.theight { 
  padding: 10px;
  border: 1px black solid; 
  margin: 10px auto; 
  width: 80%; 
  background-color: white; 
  border-radius: 4px; 
}

form { 
  width: 100%; 
  height: 100%; 
  /* 把form改成列布局，这样内容从上到下排列 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

span { 
  background-color: #b50612; 
  width: 92px; 
  height: min-content; 
  border-radius: 5px; 
  position: relative; 
  top: -7px; 
  left: 12px; 
  color: white; 
  font-weight: bold; 
  text-align: center; 
}

#presentaion { 
  color: wheat; 
  width: 100%; 
  position: absolute; 
  text-align: center; 
}

#detsubmitter { 
  /* 去掉绝对定位，改用flex居中 */
  border: 1px solid black; 
  background-color: green; 
  border-radius: 4px; 
  height: 2.6em;
  /* 水平居中 */
  margin: 10px auto 0;
  /* 让按钮宽度自适应内容，缩放时能换行 */
  width: fit-content;
  padding: 0 15px;
}

#detsubmitter:hover { cursor: pointer; }

.itemcount { 
  font-size: 16px; 
  font-family: sans-serif; 
  font-weight: 700; 
  color: #444; 
  line-height: 1.3; 
  padding: .6em 1.4em .6em 1.4em; 
  box-sizing: border-box; 
  margin: 0; 
  border: 1px solid #aaa; 
  box-shadow: 0 1px 0 1px rgba(0, 0, 0, .04); 
  border-radius: .5em; 
  appearance: none; 
  background-color: #fff; 
  height: 40px; 
}

label { 
  top: 28px; 
  left: -65px; 
  height: min-content; 
  width: 79.9667px !important; 
  display: inline-flex; 
  font-weight: bold; 
  color: black; 
}

input { 
  height: 25px; 
  border-radius: 5px; 
  position: relative; 
  margin: 5px;
}

修改后的HTML

<div id="datails_container" >
<form id="" action="" method="post">
  <div class="form-content">
    <div id="genre_cont" class="theight" style="margin-top: 75px;">
      <span>Genres</span>
      <select name="gnerenmbr" class="itemcount" id="gnerenmbr">
        <option value="01">1</option>
        <option value="02">2</option>
        <option value="03">3</option>
        <option value="04">4</option>
        <option value="05">5</option>
        <option value="06">6</option>
        <option value="07">7</option>
        <option value="08">8</option>
        <option value="09">9</option>
      </select>
      <label for="gnerenmbr">genre(s):</label>
      <input type="text" placeholder="input 1">
      <input type="text" placeholder="input 2">
      <input type="text" placeholder="input 3">
      <input type="text" placeholder="input 4">
    </div>

    <div id="language_cont" class="theight">
      <span>Languages</span>
      <select name="languagenmbr" class="itemcount" id="languagenmbr">
        <option value="01">1</option>
        <option value="02">2</option>
        <option value="03">3</option>
        <option value="04">4</option>
        <option value="05">5</option>
        <option value="06">6</option>
        <option value="07">7</option>
        <option value="08">8</option>
        <option value="09">9</option>
      </select>
      <label for="languagenmbr">Language(s):</label>
      <input type="text" placeholder="input 1">
      <input type="text" placeholder="input 2">
      <input type="text" placeholder="input 3">
    </div>

    <div id="country_cont" class="theight">
      <span>Countries</span>
      <select name="countrynmbr" class="itemcount" id="countrynmbr">
        <option value="01">1</option>
        <option value="02">2</option>
        <option value="03">3</option>
        <option value="04">4</option>
        <option value="05">5</option>
        <option value="06">6</option>
        <option value="07">7</option>
        <option value="08">8</option>
        <option value="09">9</option>
      </select>
      <label for="countrynmbr">country(ies):</label>
      <input type="text" placeholder="input 1">
      <input type="text" placeholder="input 2">
    </div>
  </div>
  
  <button id="detsubmitter" type="submit">ADD details</button>
</form>
</div>

关键修改点说明 #

1. 容器与表单布局调整：把form的flex方向改成column，并设置justify-content: space-between，这样表单内容会占据上方空间，按钮被自动推到底部。
2. 按钮居中与自适应：去掉按钮的绝对定位，用margin: 0 auto实现水平居中，width: fit-content让按钮宽度随文字内容变化，缩放时自动换行。
3. 容器最小高度：给#datails_container设置min-height，确保即使内容较少，按钮也能贴在底部。
4. 移除冗余标签：把HTML里的<br>换成CSS的margin来分隔模块，布局更可控。

这样修改后，按钮就会始终固定在容器底部中央，不管屏幕怎么缩放，按钮都会自适应位置，文字过长时也会自动换行~

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