弹性盒子垂直水平居中的9种方法
方法一：
父元素 {
display: grid;
align-items: center;
justify-items: center;
}
方法二：
父元素 {
display: grid;
align-items: center;
justify-content: center;
}
方法三：
父元素{
display: grid;
}
子元素 {
margin: auto;
}
方法四：
父元素 {
display: flex;
align-items: center;
justify-content: center;
}
方法五：
父元素{
display: flex;
}
子元素 {
margin: auto;
}
方法六：
父元素 {
display: table-cell;
vertical-align: middle;
text-align: center;
}
子元素 {
display: inline-block;
}
方法七：
父元素 {
position: relative;
}
子元素 {
position: absolute;
left: 50%;
top: 50%;
transfrom: translate(-50%, -50%);
margin: 0;
}
方法八：
父元素 {
height: xx px;
text-align: center;
}
父元素::after {
content: ;
line-height:xx px;
}
子元素 {
display: inline-block;
}
方法九：
.box {
position: relative;
}
p {
/*必须要设置宽高*/
width: 100px;
height: 40px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
上一篇：
Java基础知识总结（2021版）
下一篇：
js基础常考面试题汇总（一）（附答案）