position & transform: translate(-50%, -50%) 实现块元素百分比上下居中且自适应屏幕宽度

  <div class="login-container">
    <div class="login-box"></div>
  </div>

.login-container{
  background-color: #2b4b6b;
  height: 100%;
}
.login-box{
  width: 450px;
  height: 300px;
  background-color: #fff;
  border-radius: 3px;
  position: absolute;
  top:50%;
  left: 50%;
  /*如果直接用top和left时左上角的点居中 要想div居中 就要减去div自身狂傲度的一半*/
  transform: translate(-50%,-50%);

}

效果图

解释：translate()函数是css3的新特性.在不知道自身宽高的情况下，可以利用它来进行水平垂直居中.。
当使用：top: 50%;left: 50%;， 是以左上角为原点，故不处于中心位置
translate(-50%,-50%) 作用是，往上（x轴）,左（y轴）移动自身长宽的 50%，以使其居于中心位置。

css绝对定位中设置了transform: translate(-50%,-50%)导致文字模糊问题

原因为元素宽高为绝对定位中设置了transform: translate(-50%,-50%);属性导致，促使宽高无法整除，先检查元素宽高是否为奇数，如果是则改为偶数即可

别 transform 了，直接父元素弄成 Flex 布局，两条轴都设置居中，也能达到效果。
display: flex;
align-items: center;
justify-content: center;