如何修复fixed定位的container div在屏幕无法完全居中的问题

问题原因 #

你当前使用的「固定定位+负margin」居中方案需要提前知晓元素的准确宽高才能设置对应的负margin值，你当前设置的margin-top: -50px（对应元素高度应为100px）、margin-left: -100px（对应元素宽度应为200px），和你的.container实际宽高不符：上下各75px的padding加内容高度已经远超过100px，左右各50px的padding加两个输入框的宽度也超过200px，所以才会出现定位偏差。

最优解决方案 #

直接用transform属性替代固定负margin即可，不需要手动计算元素宽高，自适应所有尺寸的居中：
修改.container的CSS如下：

.container {
  background-color: #ffffff;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding-top: 75px;
  padding-right: 50px;
  padding-bottom: 75px;
  padding-left: 50px;
  border-radius: 10px;
}

备选方案：Flex布局居中 #

如果不需要固定定位，更推荐用Flex布局实现，代码更简洁易维护：
给body新增对应样式，同时删掉.container的定位相关属性即可：

body {
  background-color: #7a64fa;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}

.container {
  background-color: #ffffff;
  padding-top: 75px;
  padding-right: 50px;
  padding-bottom: 75px;
  padding-left: 50px;
  border-radius: 10px;
}

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