垂直中心を基準にしてdivを配置する

Question

私は、ウィンドウの上部から25％の位置にセンターが必要なようなウェルカムメッセージがあります。それは長いラインの任意の数にすることができますので、垂直中心を使用して配置する必要があります。ここに私が現在持っているものがあります。

.welcomeMessage { 
    position: absolute; 
    text-align: center; 
    vertical-align: middle; 
    display: inline-block; 
    margin: auto; 
    width: 60%; 
    top: 25%; 
} 

Iは、ディスプレイを使用して試みた：中間どちらも位置の垂直中心にDIVに対して垂直アラインで曲がる：インラインブロックとディスプレイを。どんな助けでも大歓迎です！

所望の位置： 現在の位置：

Answer 1

。 transform: translate(-50%, -50%);として

• .element彼は、ページ寸法（高さ、幅）の25％で「正確」を上下中心部と水平を可能にすること。 topおよびleftとは異なり、transformプロパティはターゲット要素のサイズに基づいているためです。したがって、設定するパーセンテージは、ターゲットのバウンディングボックスのサイズを参照します。あなたはそれになりたかったようにそれが位置していないですので、一方で
• .other
がtransformルールを持っていない、その上部の境界線は、私が編集した

.element, 
 
.other { 
 
    position: absolute; 
 
    text-align: center; 
 
    top: 25%; 
 
    left: 50%; 
 
} 
 

 
.element { 
 
    transform: translate(-50%, -50%); 
 
    color: green; 
 
} 
 

 
.other { 
 
    color: red; 
 
} 
 
html,body{ 
 
    height:100%; 
 
    margin:0; 
 
    padding:0; 
 
}

<div class="element">I'm at 25% middle</div> 
 
<div class="other">I'm not at 25% middle</div>

Answer 2

使用transform:translate(-50%);

margin: auto;inline-block要素で動作するので、あなたはそれを水平中央作るためにleft:50%を追加する必要はありません。

html,body{ 
 
    height:100%; 
 
    margin:0; 
 
    padding:0; 
 
} 
 

 
.welcomeMessage { 
 
    position: absolute; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    display: inline-block; 
 
    left:50%; 
 
    width: 60%; 
 
    top: 25%; 
 
    transform:translate(-50%); 
 
}

<div class="welcomeMessage">Welcome Message</div>

Answer 3

これはおそらく動作するはずです。私はh1のサイズを2emと定義し、フォントサイズの半分で25％減少してトップポジションを計算しました。私は2つの要素、top: 25%とleft: 50%でposition:absoluteに設定両方が怒鳴るスニペットで

.container { 
 
    width: 100vw; 
 
    height: 100vh; 
 
    background: lightgray; 
 
} 
 

 
.h1 { 
 
    font-size: 2em; 
 
} 
 

 
.welcomeMessage { 
 
    position: absolute; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    display: inline-block; 
 
    margin: auto; 
 
    width: 60%; 
 
    top: calc(25% - 1em) 
 
}

<div class="container"></div> 
 
<h1 class="welcomeMessage">Welcome</h1>