将网格单元格的内容居中对齐

Question

我想在网格项内居中对齐内容，它是水平居中而不是垂直居中。参见JSfiddle: http://jsfiddle.net/6zs8ydhf/

.container {
display: grid;
grid-template-columns: 200px auto;
grid-template-rows: 400px 200px;
}
.item {
border: 1px solid #111;
}
.item2 h1 {
display: flex;
align-items: center;
justify-content: center;
}

<div class="container">
<div class="item item1">
<h1>1</h1>
</div>
<div class="item item2">
<h1>2 Should be at center</h1>
</div>
<div class="item item3">
<h1>3</h1>
</div>
</div>

Answer 1

这是你需要做的:

.item {
border: 1px solid #111;
display: flex;
align-items: center;
justify-content: center;
}