divの固定高さを作成しました。テキストをdiv内に垂直方向と水平方向の両方に整列させます。div要素内のテキストを水平方向と垂直方向に整列する
私はmargin：autoと テキストアラインメントを試してみましたが、役に立たなかったです。
初心者のHTML/CSSです。
<!DOCTYPE html>
<html>
<body>
<div style="background-color:black;color:white;padding:20px; height:400px;">
<h2>London</h2>
</div>
</body>
</html>
h2 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
実は我々変換を用いたが、実際には中央に完全に合わせるれていないことなく、答えを持っている必要があります。この
.align{
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
h2 {
position: absolute;
top: 50%;
left: 50%;
}<div>
<h2>London</h2>
</div>
を使用してください。どうして？変換の実際の役割は何ですか？ –
左上50％の位置は、その親の中のh2死んだ中心の左上隅を設定します。 Transformはh2の寸法に対して50％後ろに移動するために使用され、視覚的に中央に表示されます。 – depiction