html - 网格元素未按预期对齐

Question

我试图让 item 的内容在中间的列中，但它似乎没有移动。

.home-grid-container {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: 0.10fr 0.98fr auto;
  height: 100vh;
}

.home-header {
  grid-column: 1 / span 3;
  grid-row: 1 / span 1;
  background: #3f51b5;
}

.home-main {
  grid-column: 1 / span 3;
  grid-row: 2 / span 3;
  background: #81d4fa;
}

.item {
  grid-column: 2 / span 1;
  grid-row: 2 / span 3;
}

.home-footer {
  grid-column: 1 / span 3;
  grid-row: 5 / span 1;
  background: #3f51b5;
  div {
    text-align: center;
    margin: 2vh;
  }
}

<div class="home-grid-container">
  <div class="home-header">
    <h1>
      <img src="/src/imgs/sitelogo.png" />
    </h1>
  </div>
  <div class="home-main">
    <div class="item">
      Simple, Fast, Powerful
      <input type="button" value="100% Free" />
    </div>
  </div>
  <div class="home-footer">
    <div>All Rights Reserved</div>
  </div>
</div>

https://css-tricks.com/snippets/css/complete-guide-grid/

Answer 1

您想要居中的元素是网格容器的后代，而不是子元素。

因为网格布局只在父元素和子元素之间延伸，.item 元素超出范围并且不接受网格属性。

但这些元素是 block 容器的内联级子元素，这意味着 text-align: center 将起作用。

.home-grid-container {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: 0.10fr 0.98fr auto;
  height: 100vh;
}

.home-header {
  grid-column: 1 / span 3;
  grid-row: 1 / span 1;
  background: #3f51b5;
}

.home-main {
  grid-column: 1 / span 3;
  grid-row: 2 / span 3;
  background: #81d4fa;
}

.item {
  grid-column: 2 / span 1;
  grid-row: 2 / span 3;
  text-align: center;    /* NEW */
}

.home-footer {
  grid-column: 1 / span 3;
  grid-row: 5 / span 1;
  background: #3f51b5;
}

<div class="home-grid-container">
  <div class="home-header">
    <h1>
      <img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt="">
    </h1>
  </div>
  <div class="home-main">
    <div class="item">
      Simple, Fast, Powerful
      <input type="button" value="100% Free" />
    </div>
  </div>
  <div class="home-footer">
    <div>All Rights Reserved</div>
  </div>
</div>

jsFiddle demo