2つのクラスのトランスフォームプロパティをマージするにはどうすればよいですか？ここ

Question

は問題だ：あなたが画像で見ることができるように、プロパティはの変換

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

：

は、ここに私のHTMLとCSSです.vertical-alignがオーバーライドされます。

変換プロパティをどのようにマージできますか.vertical-alignと.horizontal-align？

ありがとうございました！

Answer 1

あなたは1つがそうのように変換さの両方でtransformプロパティを定義することができます。

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

しかし、私はあなたがそれよりも多くを行うことができるとは思いません。変換プロパティは1つしか存在できません。

Answer 2

あなたが好きな変換を組み合わせることができます。ここでは

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

はコードです：

.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; 
 
}

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

そして、ここではJS Fiddleです。