原来一直使用flex布局来实现水平垂直居中,今天才知道还有grid也是很好用的,参考阮一峰大神的博客,简单记录一下学习;
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
</div>
.container {
display: grid;
/* grid-template-columns属性定义每一列的列宽,grid-template-rows属性定义每一行的行高。 */
grid-template-columns: repeat(4, 60px);
grid-template-rows: repeat(2, 60px);
/* grid-gap属性是grid-column-gap和grid-row-gap的合并简写形式,
grid-row-gap属性设置行与行的间隔(行间距),grid-column-gap属性设置列与列的间隔(列间距)
我设置的是10 行与行之间 列与列之间 都是10*/
grid-gap: 10px;
/* item在这个单元格中的位置justify-items属性设置单元格内容的水平位置(左中右),align-items属性设置单元格内容的垂直位置(上中下) */
align-items: center;
justify-items: center;
/* justify-content属性是整个内容区域在容器里面的水平位置(左中右),align-content属性是整个内容区域的垂直位置(上中下)。 */
justify-content: center;
align-content: center;
width: 100%;
height: 500px;
background: #f3f3f3;
}
.item {
width: 30px;
height: 30px;
display: grid;
border: 1px solid red;
justify-content: center;
align-content: center;
}
-
关于 justify-content: center; align-content: center; justify-content是控制整个内容区域在container中的位置的
-
align-items: center; justify-items: center;简单来说-items是控制单个单元格的位置的
这是未设置任何center的状态
这是设置了 justify-content: center; align-content: center;
可以看到整体居中了 但是每个div在自己所在的单元格内还是处在左上角的位置的
这里设置里align-items: center; justify-items: center;,单元格内就居中了
3.一般情况下需要item中的文字也水平垂直 所以我给item也设置了grid 就可以实现了
ps:如果没有设置 就会是下面的情况
参考 http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html