|
第1种：
利用grid布局，把父级设置为grid，而后设置主轴和副轴为居中，实现垂直居中。
.box1 {
width: 200px;
height: 200px;
border: 1px solid;
display: grid;
align-items: center;
justify-items: center;
}
第二种：
把父级设置为grid，而后设置主轴和副轴为居中，运用justify-content，实现垂直居中。
.box2 {
width: 200px;
height: 200px;
border: 1px solid;
display: grid;
align-items: center;
justify-content: center;
}
第三种：
把父级设置为grid，而后在子元素里设置外边距：margin：auto； 实现垂直居中
.box3 {
width: 200px;
height: 200px;
border: 1px solid;
display: grid;
}
.box3 > p {
bac公斤round: green;
margin: auto;
}
第四种：
把父级设置为flex，而后继续运用align-items 和justify-content，实现垂直居中。
.box4 {
width: 200px;
height: 200px;
border: 1px solid;
display: flex;/*同grid*/
align-items: center;
justify-content: center;
}
第五种：
把父级设置为flex，而后在子元素中设置margin:auto;实现垂直居中。
.box5 {
width: 200px;
height: 200px;
border: 1px solid;
display: flex;
}
.box5 > p {
bac公斤round: grey;
margin: auto;
}
第六种：
把父级设置为display:table-cell;，而后用vertical-align属性让子元素垂直居中，而后用text-align属性让文本水平居中，最后在子元素上设置inline-block，实现垂直居中。
.wrapper {
display:table;
width:200px;
}
.box6 {
height:200px;
border: 1px solid;
display:table-cell;
vertical-align: middle;
text-align: center;
}
.box6 > p {
bac公斤round: orange;
display: inline-block;
}
第七种：
设置父级为相对定位，再设置子元素为绝对定位，在内部向左/向上迁移50%，实现垂直居中。
.box7 {
width: 200px;
height: 200px;
border: 1px solid red;
position:relative;/*为p的内容定位*/
}
.box7 > p {
position: absolute;
left: 50%;
top: 50%;
bac公斤round: pink;
transform: translate(-50%,-50%);
margin: 0;
}
第八种
设置父系为文本水平居中，而后设置伪元素::after，设置行高为父系盒子同样的高度，最后给子元素设置inline-block，实现垂直居中。
.box8 {
width: 200px;
height: 200px;
border: 1px solid;
| 
发表于 2024-6-30 05:14:56
楼主