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

Question

问题在于：

这是 HTML 和 CSS ：

＆＃13;

＆＃13;

.page-content {
  width: 100%;
  height: 100vh;
}

.vertical-align {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.horizontal-align {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

正如您在图片中看到的那样，.vertical-align的属性转换已被覆盖。

如何合并.vertical-align AND .horizontal-align的转换属性？

感谢您的回答！

Answer 1

您可以使用两种翻译定义一个转换属性，如下所示：

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

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

Answer 2

您可以组合转换，如：

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

以下是代码：

＆＃13;

＆＃13;

.vertical-align { 
  top: 50%;
  transform: translateX(-50%) translateY(-50%); 
}

.horizontal-align {
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateY(-50%); 
}

div.page-content {
  width: 100%;
  height: 100vh;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

这是JS Fiddle。