问题是:
这是我的 HTML 和 CSS:
.page-content {
width: 100%;
height: 100vh;
}
.vertical-align {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.horizontal-align {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
<div class="page-content">
<div class="vertical-align horizontal-align">
<div class="row">
<h1>Test</h1>
</div>
<div class="row">
<h1>Test</h1>
</div>
</div>
</div>
如您在图像中所见,.vertical-align
的属性转换被覆盖。
如何合并 .vertical-align
AND .horizontal-align
的转换属性?
感谢您的回答!
最佳答案
您可以像这样定义一个具有两种翻译的转换属性:
transform: translateX(-50%) translateY(-50%);
但我认为您不能做更多的事情。只能有一个转换属性。
关于html - 如何合并两个类的转换属性?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43744498/