|
办法1：gird布局
父级元素display设置grid，主轴和副轴设置为center。
.box{
display: grid;
align-items: center;
justify-items: center;
}
办法2：justify-content替换justify-items
在办法1的基本上，用justify-content替换justify-items能够取得相同效果
.box{
display: grid;
align-items: center;
justify-content: center;
}
办法3:
父级display设置为grid，子元素的margin为auto。
.box{
display: grid;
}
p{
margin: auto;
}
办法4：
运用flex布局得到居中效果，设置父元素display为flex，和办法1同样，运用align-items: center; justify-content: center;
.box{
display: flex;
align-items: center;
justify-content: center;
}
办法5：
父元素运用flex布局，子元素设置margin:auto;
.box{
display: flex;
}
p{
margin: auto;
}
办法6：
父元素设置为display:table-cell;，而后用vertical-align设置子元素垂直居中，用text-align属性让文本水平居中，在子元素上设置inline-block。
这种办法并不常用
.box{
display: table-cell;
vertical-align:middle;
text-align:center;
}
p{
display:inline-block;
}
办法7：
设置父元素为relative，再设置子元素为absolute，左边和上边偏移50%，实现居中。
.box{
position: relative;
}
p{
position: absolute;
left: 50%;
top: 50%;
transfrom: translate(-50%,-50%);
margin: 0;
}
办法8：
父元素，text-align:center,运用伪元素::after为盒子开头形成空字符串。
设置行高为盒子的高度，而后子元素display：inline-block.
.box{
width: 200px;
height: 200px;
text-align: center;
}
.box::after{
content: ;
line-height: 200px;
}
p{
display: inline-block;
}
办法9：
已然弃用，但亦能实现居中，不举荐。
.box{
position: relative;
}
p{
width: 100px;
height: 40px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
| 
发表于 2024-6-30 09:36:51