我意识到我在这里问了两个不同的问题，但由于我对 HTML 和 CSS 缺乏经验，我觉得它们是相互关联的。如果不出意外，我不确定如何提出一个问题，同时确保我得到的答案与另一个问题兼容。
所以，这里是：
我正在制作一个小型计算器，它需要在不同的窗口大小下看起来不错。我有一些按钮分组，它们都需要放在一起，而不同的分组会根据窗口大小移动。下面是“良好行为”的截图：
内容与标题一起，并且没有奇怪的空格。
然后我们得到下一个行为：在窗口宽度发生微小变化时，一些材料被向下移动，但不是整个 div - 标题保持：
如何使标题跟随内容向下？
最后，当窗口宽度变得更小时，标题也会向下移动：
这种行为很好，但我希望顶部的剩余内容能够利用额外的空间并水平居中。知道怎么做吗？我看过一些问题，例如如何使用 CSS 轻松地将 <div> 水平居中？，但它们似乎都需要增加我想要居中的元素的宽度，这破坏了屏幕截图 #1 中的行为。
在这里可以看到一个例子：
如何在不影响 #1 的情况下修复屏幕截图 #2 和 #3？
我当然也做了一个小提琴，但我认为截图会更好：
其中是：
<!DOCTYPE html>
<html>
<head>
<style>
.incbut,.decbut,.rollButton{
background-color:#FF961F;
}
.regular-checkbox{
border-color:#FF961F;
}
body {
background-color:#FCB41B;
color:#753B08;
}
.modifiers{
text-align:left;
min-width:8em;
}
.center{
margin-left:auto;
margin-right:auto;
}
.inputField {
max-width:2em;
border:1px #bababa solid;
vertical-align:middle;
text-align:center;
}
.incbut,.decbut {
border: 1px transparent solid;
display: inline-block;
text-align: center;
vertical-align: middle;
cursor: pointer;
padding: 4px 10px;
position: relative;
width: 2.5em;
}
.rollButton{
border: 1px transparent solid;
display: inline-block;
text-align: center;
vertical-align: middle;
cursor: pointer;
padding: 4px 10px;
position: relative;#FF0000
}
button:active{
background-color:#FF0000;
}
.fieldCol{
float:left;
text-align:center;
max-width=45%;
height:9em;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.incbut,.inputField, .decbut{
min-height:2em;
margin-right:0.5em;
margin-bottom:0.3em;
}
h2{
margin:0.1em;
font-weight:500;
}
h2,button, input{
font-family:inherit;
}
.outputField{
padding:2px;
margin:3px;
border:1px #753B08 solid;
width=2em;
line-height:1.7em;
white-space:nowrap;
}
label {
display: inline;
}
.checkBoxLabel{
margin-left:5px;
font-size:90%;
}
.regular-checkbox {
display: none;
}
.regular-checkbox + label {
border: 3px solid #FF961F;
padding: 9px;
background-color: #FFFFFF;
display: inline-block;
position: relative;
vertical-align:middle;
margin: .1em;
}
.regular-checkbox:checked + label {
border: 3px solid #FF961F;
}
.regular-checkbox:checked + label:after {
content: '\2716';
font-size: 1em;
position: absolute;
top: 0px;
left: 10%;
color: #753B08;
font-weight: 600;
}
.checkboxbox2{
width:8em;
float:left;
}
.colContainer{
text-alignment:center;
}
div.centre{
text-align: left;
width: 17em;
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body style="text-align:center;font-family: 'Segoe UI', 'Open Sans', Verdana, Arial, Helvetica, sans-serif;" class="center">
<!--
<div class="colContainer">
<div class="centre">
-->
<section id="bal_attacker" class="fieldCol">
<h2>Attacker:</h2>
<label for="bal_BS1">BS:</label> <br>
<button type="button" id="bal_BS1inc" class="incbut"> + </button>
<input type="number" id="bal_BS1" value="1" class="inputField">
<button type="button" id="bal_BS1dec" class="decbut"> - </button> <br>
<label for="bal_S">S:</label> <br>
<button type="button" id="bal_Sinc" class="incbut"> + </button>
<input type="number" id="bal_S" value="1" class="inputField"/>
<button type="button" id="bal_Sdec" class="decbut"> - </button>
</section>
<section id="bal_defender" class="fieldCol" >
<h2>Defender:</h2>
<label for="bal_T">T:</label> <br>
<button type="button" id="bal_Tinc" class="incbut"> + </button>
<input type="number" id="bal_T" value="1" class="inputField">
<button type="button" id="bal_Tdec" class="decbut"> - </button> <br>
</section>
<!--
</div>
</div>
-->
<div>
<section title="bal_Modifiers" class="modifiers">
<h2 style="text-align:center;">Modifiers:</h2><br>
<span class="checkboxbox2">
<input type="checkbox" id="bal_harmConv" class="regular-checkbox" /><label for="bal_harmConv"></label>
<label for="bal_harmConv" class="checkBoxLabel">Harm. Conv.</label>
</span>
<span class="checkboxbox2">
<input type="checkbox" id="bal_rrToHit" class="regular-checkbox" /><label for="bal_rrToHit"></label>
<label for="bal_rrToHit" class="checkBoxLabel">R.r. to hit</label>
</span>
<span class="checkboxbox2">
<input type="checkbox" id="bal_rrToW" class="regular-checkbox" /><label for="bal_rrToW"></label>
<label for="bal_rrToW" class="checkBoxLabel">R.r. to wound</label>
</span>
<div style="clear: both;"></div>
</section>
<div style="clear: both;"></div>
</body>
</html>
我很抱歉这不是一个最小的工作示例 - 我已经尝试了一段时间来进一步减少它，但是当我尝试时我似乎破坏了一些东西。