元素的居中实现很多,css和js都可以完成效果。
这里,记录下在h5实现宫格的居中对齐。我这里主要是3*3, 3*2, 3*1,最后一行分别的是3个元素,2个元素,1个元素的情况。
3*3效果
- 也是最简单的效果
<body>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
</body>
body{
background-color: slateblue;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.box{
width: 100px;height: 100px;
background-color: cornflowerblue;
margin: 10px;
color: #fff;
text-align: center;
line-height: 100px;
}
3*2效果
<body>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
<div class="box">10</div>
<div class="box">11</div>
</body>
- 这样的居中,不是我想要的效果,
要最后一行能左对齐·
,线下继续使用上面的css无法做到
- 改造css,增加下面的代码
body::after{
content: '';
width: 100px;
height: 100px;
margin: 10px;
}
这样,我们就实现了最后一行的左对齐
3*1的效果
同理,最后一行只有一个元素的时候
body::after{
content: '';
width: calc(110px * 2);
height: 100px;
margin: 10px;
}
大家可以根据自己的实际情况,去扩展下,4*4等其他的场景。