实现已知或者未知宽度的垂直水平居中

Posted tony100

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了实现已知或者未知宽度的垂直水平居中相关的知识,希望对你有一定的参考价值。

.wraper {
position: relative;
.box {
position: absolute;
top: 50 %;
left: 50 %;
width: 100px;
height: 100px;
margin: -50px 0 0 - 50px;
}
}
// 2
.wraper {
position: relative;
.box {
position: absolute;
top: 50 %;
left: 50 %;
transform: translate(-50 %, -50 %);
}
}
// 3
.wraper {
.box {
display: flex;
justify-content: center;
align-items: center;
height: 100px;
}
}
// 4
.wraper {
display: table;
.box {
display: table-cell;
vertical-align: middle;
}
}

以上是关于实现已知或者未知宽度的垂直水平居中的主要内容,如果未能解决你的问题,请参考以下文章

CSS水平居中+垂直居中+水平/垂直居中的方法总结

css如何实现span在div中水平居中

Swift:如何在垂直stackview中水平居中元素

模态框中水平垂直居的问题

如何使文字在div中水平和垂直居中的css代码

让DIV中的内容水平和垂直居中