html - 将按钮移动到 div 底部后按钮不居中

Question

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

我通过在父 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>

CSS:

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

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

演示:https://jsfiddle.net/f9ktLn9o/3/

Answer 1

您使用 position: absolute; 将其从堆栈中拉出的位置现在将位于按钮左侧的中央。如果将其向左移动按钮宽度的 50%，应该可以解决问题。

transform: translateX(-50%);

https://jsfiddle.net/f9ktLn9o/4/