ページタイトルテキストを親バナーイメージ内に垂直に配置する方法は？

Question

私は自分のウェブサイトの各ページのタイトルを持っており、デフォルトではそのページのバナー画像内に配置されています。私はこれらのページタイトルを中心とするソリューションを導入しましたが、コード実装はページ間で矛盾しています。最大の問題は、モバイルでは、物事がちょっとしたものになってしまうことです。私は中央のテキストに、以前にこのルールを使用しますが、それは、デバイスの画面の幅に基づいて、不整合が発生します。

@media screen and (max-width: 769px) { #banner-area { padding-top: 85px; }} 

事実上、これは携帯電話の画面サイズ上の正しい位置にコンテンツをプッシュダウン。しかし、それはちょっと "ハッキー"で、控えめなようです。私は後に移動Yプロパティになって、上下にテキストを中央に、このコードを制定しました：HTML対応

/* Page 1 */ 

@media screen and (max-width: 769px) { #page-title { transform: translateY(-30px); }} 
@media screen and (min-width: 770px) { #page-title { transform: translateY(10px); }} 

/* Pages 2 through 7 */ 

#page-title { transform: translateY(50%); } /* or below... */ 
@media screen and (min-width: 770px) { #page-title { transform: translateY(50%); }} 

：

<div id="banner-area"> 
    <div id="page-title"> 

が、これは垂直方向にもセンタリングのために、このCSSルールを記述するための正しい方法ですが、他の誰かがより良い解決策を提供することができますか？ページ1には独自のルールセットがあり、残りのルールはほぼ同じで、センタリングの効果が得られます。そのバナーエリアのパディングのハックを取り除くことができるようになるだろう - 私は、複数のデバイスの画面サイズに対して1サイズのルールが必要です。

ありがとうございます！

タイラー

Answer 1

あなたの質問は少し漠然としており、適切なHTMLとCSSなしで私たちは、あなたが望むかもしれない答えを与えることはできません。私が正しく理解している場合しかし、これはあなたが後にしているものです：％変換で

#page-title { 
    margin-top: 50%; 
    transform: translateY(-50%); 
} 

または

parent { 
    position: relative; 
} 

#page-title { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translateX(-50%) translateY(-50%); 
} 

代わりに、親のサイズに、DIVのサイズを参照してください。

代わりにあなたが親要素にフレキシボックスを使用することもできます。

parent { 
    display: flex; 
    align-itens: center; // Vertical 
    justify-content: center; // Horizontal 
} 

もう一度、コンテキストなしであれば、最適なソリューションですこれらのどの言い難いです。

Answer 2

あなたはこれらに従うことができます： HTML：

<div class="page-title"> 
    <h2>Page Title</h2> 
</div> 

のCss：あなたが今使用しているHTMLやCSSを

.page-title{ 
    display: flex; 
    align-items:center; 
    background-color: #fafafa; 
    height: 300px; 
}