窗口大小上的CSS网格布局奇怪行为

Question

Windows 7中

Chrome版本60.0.3112.78（官方版本）（64位）

我正在探索CSS网格布局，并且在Chrome中遇到了一个奇怪的问题（在Firefox中运行良好）。我创建了一个简单的注册表单，我希望在页面上水平和垂直居中。

我使用三个嵌套网格来构建我的布局。

＆＃13;

＆＃13;

html {
  height: 100%;
}
body {
  font-family: 'Rubik', sans-serif;

  margin: 0;
  padding: 0;
  background: #aaffff;
  height: 100%;
}
#root {
  height: 100%;
}

button,
input,
label {
  font-family: 'Rubik', sans-serif;
  font-weight: 600;
}
label {
  display: inline-block;
  text-align: left;
}
.formGroup {
  display: inline-block;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
a:link {
  text-decoration: none;
  color: inherit;
}
a:hover {
  text-decoration: underline;
}

*:focus {
  outline-width: 3px;
  outline-color: rgba(66, 66, 66, 0.7);
  outline-style: dashed;
  outline-offset: 3px;
}

.Input {
  color: #333;
  border: none;
  height: 2em;
  padding: 5px 10px;
  display: block;
  /* width: 100%; */
}
.Input:focus {
  outline-width: 3px;
  outline-color: rgba(66, 66, 66, 0.7);
  outline-style: dashed;
  outline-offset: 3px;
}

.Button {
  display: inline-block;
  font-weight: 800;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  padding: 20px 40px;
  border-radius: 4px;
  border: none;
  background: none;
  position: relative;
  text-transform: uppercase;
  margin: 15px 30px;
}

.Button.primary {
  background: #0000ff;
  box-shadow: 0 9px #000088;
  color: #fff;
}
.Button.primary:hover {
  top: 5px;
  box-shadow: 0 4px #000088;
}
.Button.primary:active {
  top: 9px;
  box-shadow: none;
}
.Button.primary:focus {
  outline-width: 3px;
  outline-color: rgba(0, 0, 255, 0.7);
  outline-style: dashed;
  outline-offset: 3px;
}

.RegistrationForm-container {
  display: grid;
  grid-template-columns: 3% auto 3%;
  grid-template-rows: 100px 25% auto 25%;
}
.RegistrationForm-container .copy {
  grid-column-start: 2;
  grid-row-start: 2;
}

.RegistrationForm-container form {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 3;
  display: grid;
  grid-template-columns: 1% auto 1%;
  grid-template-rows: 25px auto 25px;
}

.RegistrationForm-container form .inner {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 3;
  display: grid;
  grid-template-columns: 1% auto 1%;
  grid-template-rows: 50px 50px;
}
.RegistrationForm-container form .inner .emailFormGroup {
  grid-column-start: 2;
  grid-row-start: 1;
  margin: 0 auto;
}
.RegistrationForm-container form .inner .buttonFormGroup {
  grid-column-start: 2;
  grid-row-start: 2;
}
.App {
  text-align: center;
  height: 100%;
}

＆＃13;

<div id="root">
  <div class="App">
    <div class="RegistrationForm-container">
      <div class="copy">
        <h1>Register</h1>
        <p>
          By registering, you agree to our
          <a href="/terms">terms of use and privacy policy</a>.
        </p>
      </div>
      <form>
        <div class="inner">
        
          <div class="formGroup emailFormGroup">
            <input
                   class="Input"
                   type="email"
                   placeholder="Email"
                   autocorrect="false"
                   />
          </div>
          <div class="formGroup buttonFormGroup">
            <button type="submit" class="Button primary">
              Submit
            </button>
          </div>
          
        </div>
      </form>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

虽然我的网格布局确实成功居中，但是在调整窗口大小时它会出错。当窗口调整大小大于原始加载大小，然后缩小时，会出现一个滚动条，输入和按钮会卡在右侧。

只有点击页面中的某个位置或按钮，输入和使用条款链接之间的标签，它才会自行纠正并快速回到垂直/水平居中。

以下是行为的演示：

https://codepen.io/jdoyle/pen/qXadXJ

https://plnkr.co/edit/rzAAAsfgPVUfxxmXlqYa?p=preview

Answer 1

看起来网格中的margin:auto确实开始变得非常奇怪。

获得所需效果但避免错误的方法是设置

text-align: center;

<{1>}上的

然后删除电子邮件输入上的emailFormGroup。

https://codepen.io/anon/pen/YxGyeG