html - 如何合并两个类的转换属性？

Question

问题是:

这是我的 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 .horizo​​ntal-align 的转换属性？

感谢您的回答!

Answer 1

您可以像这样定义一个具有两种翻译的转换属性:

transform: translateX(-50%) translateY(-50%);

但我认为您不能做更多的事情。只能有一个转换属性。