Grid布局的三种实现方式
办法1&2：为必须居中的元素的父级添加 ：
<div class="box">
<p> 123 </p>
</div>
<style>
.box{
display : grid;
align-items: center ;
justify-items: center;
}
</style>
或
<div class="box">
<p> 123 </p>
</div>
<style>
.box{
display : grid;
align-items: center ;
justify-content: center;
}
</style>
区别：两者虽然实现的效果一致，但浏览器渲染方式区别。运用justify-items：center，在检查元素时会发掘子项的边框是占满全部格子的；而justify-content：center，检测子项元素时边框是元素本身的体积。
办法三： 为子元素添加margin：auto；
该方式与Flex布局实现居中的方式类似，利用margin吸收空白空间，使元素居中。
Flex布局的两种实现方式：
办法一：为必须居中的元素的父级添加 ：使元素沿着主轴和侧轴都居中表示，从而实现水平垂直居中。
<div class="box">
<p> 123 </p>
</div>
<style>
.box{
display:flex;
align-items: center ;
justify-content: center;
}
</style>
办法二：为子元素添加margin：auto；
该方式与Grid布局实现居中的方式类似，利用margin吸收空白空间，使元素居中。
Table-cell布局实现居中：
为必须居中的元素的父级添加：必须为父级盒子设置宽度，否则宽度将由孩儿的内容撑开；或再设置一个盒子包裹父级盒子，设置width=100%，才能够和浏览器同宽。
<div class="box">
<p> 123 </p>
</div>
<style>
.box{
width:300px;
display:table-cell;
vertical-align:center;
text-align:center;
}
</style>
绝对定位实现居中：
<div class="box">
<p> 123 </p>
</div>
<style>
.box{
position: relative;
width:200px;
height:200px;
}
p{
position:absolute;
left:50%;
top:50%;
transform: translate(-50%, -50%);
margin:0;
}
</style>
重视：子项添加了绝对定位，那样必定要为父级元素添加相对定位来做为参考点。 同期，倘若无清除p标签的外边距，那样translate会将margin值计算在内，引起视觉上并无居中。
line-height实现居中：
<div class="box">
<p> 123 </p>
</div>
<style>
.box{
width:200px;
height:200px;
text-align:center;
}
.box::after{
content:;
line-height:200px;
}
</style>
利用伪元素的文本基线与容器中心对齐，line-height的值必须与容器等高，才可实现垂直居中效果。但当父级容器height不知道，或子元素内存在块级元素便没法运用。
| 
发表于 2024-6-30 09:44:14
