垂直居中grid方案
垂直居中有多个方案,flex/table-cell/line-height/margin/padding等,现在说下grid方案,了解grid网格布局
<div class="box">
<div class="cell">1</div>
<div class="cell">2</div>
<div class="cell">3</div>
<div class="cell">4</div>
<div class="cell">5</div>
<div class="cell">6</div>
<div class="cell">7</div>
<div class="cell">8</div>
</div>
在多个子元素下,设置父级 display:grid,grid-template-columns
设置列数和列宽,可以单独设置grid-template-columns:60px 60px 60px 60px
,grid-gap: grid-row-gap grid-column-gap;
grid-gap为行距和列距简写,align-items和justify-items为内容居中设置
display: grid;
grid-template-columns: repeat(4, 60px);
grid-template-rows: repeat(2, 60px);
grid-gap: 10px;
align-items: center;
justify-items: center;
justify-content: center;
align-content: center;
width: 100%;
height: 500px;
background: #f3f3f3;
版权声明:
作者:wuhou123
链接:https://wuhou.fun/509.html
来源:前端网
文章版权归作者所有,未经允许请勿转载。

共有 0 条评论