Html 按钮移动到div底部后未对中

我正在尝试创建一个表单，其中提交始终位于底部和中心

我在父div中使用

text align:center

来居中，并使用

position:absolute

和

bottom:20px

将其移动到底部，但在我这样做之后，它似乎稍微偏离了中心-为什么会出现这种情况，我如何补救

HTML:

<div class='container'>
  <form>
    <p>
      <input name='group 1' type='radio' id='1' />
      <label for='1'>option 1</label>
    </p>
    <p>
      <input name='group 1' type='radio' id='2' />
      <label for='2'>option 2</label>
    </p>
    <p>
      <input name='group 2' type='radio' id='3' />
      <label for='3'>option 1</label>
    </p>
    <p>
      <input name='group 1' type='radio' id='4' />
      <label for='4'>option 1</label>
    </p>
    <button type='submit'>
      Submit
    </button>
  </form>
</div>

.container {
  width: 400px;
  height: 400px;
  border: 2px solid red;
  text-align: center;
}

button {
  position: absolute;
  bottom: 20px;
}

---

演示：

使用

position:absolute将其从堆栈中拉出它现在将居中于按钮的左侧。如果你把按钮宽度的50%翻译到左边，应该可以解决这个问题

transform: translateX(-50%);

使用
位置：绝对将其从堆栈中拉出它现在将居中于按钮的左侧。如果你把按钮宽度的50%翻译到左边，应该可以解决这个问题

transform: translateX(-50%);

查看计算样式，您将看到框模型中定义的
左
和
右
位置值

您需要用自己的方法取消设置这些值，再进行一些其他调整，您将实现预期的行为


代码片段演示：

<div class='container'>
  <form>
    <p>
      <input name='group 1' type='radio' id='1' />
      <label for='1'>option 1</label>
    </p>
    <p>
      <input name='group 1' type='radio' id='2' />
      <label for='2'>option 2</label>
    </p>
    <p>
      <input name='group 2' type='radio' id='3' />
      <label for='3'>option 1</label>
    </p>
    <p>
      <input name='group 1' type='radio' id='4' />
      <label for='4'>option 1</label>
    </p>
    <button type='submit'>
      Submit
    </button>
  </form>
</div>

.container {
  width: 400px;
  height: 400px;
  border: 2px solid red;
  text-align: center;
}

button {
  position: absolute;
  bottom: 20px;
}


.container{
宽度：400px；
高度：400px；
边框：2倍纯红；
文本对齐：居中；
/*附加的*/
位置：相对；/*绝对子对象相对于父对象的位置*/
}
钮扣{
位置：绝对位置；
底部：20px；
/*附加的*/
左：0；
右：0；
显示：块；
保证金：自动；
宽度：100px；
}


选择1


选择2


选择1


选择1

提交
查看计算样式，您将看到框模型中定义的
左
和
右
位置值

您需要用自己的方法取消设置这些值，再进行一些其他调整，您将实现预期的行为


代码片段演示：

<div class='container'>
  <form>
    <p>
      <input name='group 1' type='radio' id='1' />
      <label for='1'>option 1</label>
    </p>
    <p>
      <input name='group 1' type='radio' id='2' />
      <label for='2'>option 2</label>
    </p>
    <p>
      <input name='group 2' type='radio' id='3' />
      <label for='3'>option 1</label>
    </p>
    <p>
      <input name='group 1' type='radio' id='4' />
      <label for='4'>option 1</label>
    </p>
    <button type='submit'>
      Submit
    </button>
  </form>
</div>

.container {
  width: 400px;
  height: 400px;
  border: 2px solid red;
  text-align: center;
}

button {
  position: absolute;
  bottom: 20px;
}


.container{
宽度：400px；
高度：400px；
边框：2倍纯红；
文本对齐：居中；
/*附加的*/
位置：相对；/*绝对子对象相对于父对象的位置*/
}
钮扣{
位置：绝对位置；
底部：20px；
/*附加的*/
左：0；
右：0；
显示：块；
保证金：自动；
宽度：100px；
}


选择1


选择2


选择1


选择1

提交
试试这个，而不是css：

button {
  position: relative;
  margin-top: 40%;
}

它适用于chrome、Firefox、Edge和IE（刚刚测试过）
使用
位置：绝对位置，按钮在页面中固定，但在div中未固定。
如果可以的话，请始终尝试使用百分比而不是像素（响应性设计更适合最终用户）
尝试以下内容，而不是css：

button {
  position: relative;
  margin-top: 40%;
}

它适用于chrome、Firefox、Edge和IE（刚刚测试过）
使用
位置：绝对位置，按钮在页面中固定，但在div中未固定。
如果可以，请始终尝试使用百分比而不是像素（对最终用户来说，响应性设计更合适）
在所有答案中，像这样的答案是最好的。谢谢在所有答案中，像这一个是最好的。谢谢