由于自定义CSS（语义UI React）造成的模糊性]] << [

Question

我为登录页面制作了一个LoginLayout容器：

class LoginLayout extends Component {
  render() {
    return (
      <div className="auth-main">
        <div class="auth-content">
          <div className="auth-card">
            <img src={logo} alt="Logo" className="auth-logo" />
            <Header as="h2" color="black" textAlign="center">
              {this.props.header}
            </Header>
            <Form.Group size="large" className="auth-form" autocomplete="off">
              {this.props.children}
            </Form.Group>
          </div>
        </div>
      </div>
    )
  }
}

这是.css文件：

.auth-main {
    background-color: #ffffff;
}

.auth-content {
    left: 50%;
    position: fixed;
    text-align: center;
    top: 50%;
    transform: translate(-50%, -50%);
}

.auth-card {
    border-radius: 1%;
    min-width: 300px;
}

.auth-logo {
    width : 75%;
    margin: 5%
}

.auth-form {
    margin: 10%;
}

这就是我在LoginLayout中嵌套登录表单的方式：

return (
    <div>
      <LoginLayout header="Sign up to get started">
        <Form onSubmit={postLogin}>
          <Form.Input
          ...
      </LoginLayout>

结果将元素定位得很好，但是内容的整体清晰度似乎降低了。 

我打开了另一个Chrome窗口，将其与“注册”页面进行了比较，该页面相同，但周围没有任何布局组件。

Stackoverflow也降低了图像质量，但是区别仍然很明显：

清晰度变化背后的原因是什么？是调整大小还是隐藏CSS属性？有什么办法可以解决这个问题？

我已经为我的登录页面制作了一个LoginLayout容器：类LoginLayout扩展了组件{render（）{return（

... []]]

[好，我试图逐个排除每个CSS属性。似乎模糊是由transform: translate(-50%, -50%)属性引起的。没有它，内容将与以前一样，只是没有被指定给中心，因此需要一种替代方法。

目前我还没有答案，为什么翻译会导致清晰度下降。

Answer 1

[好，我试图逐个排除每个CSS属性。似乎模糊是由transform: translate(-50%, -50%)属性引起的。没有它，内容将与以前一样，只是没有被指定给中心，因此需要一种替代方法。