positionプロパティを使ってdiv内のテキストを縦中央に配置する方法
CSSでdiv内のテキストを垂直方向に中央揃えする方法
text-align プロパティ
最もシンプルで簡単な方法です。text-alignプロパティに center を設定することで、div内のテキストを水平方向に中央揃えできます。
.div {
text-align: center;
}
line-heightプロパティは、行の高さを設定します。divの高さを固定し、line-heightプロパティに同じ値を設定することで、テキストを垂直方向に中央揃えできます。
.div {
height: 200px;
line-height: 200px;
}
marginプロパティは、要素の外側の余白を設定します。margin-topとmargin-bottomに auto を設定することで、div内のテキストを垂直方向に中央揃えできます。
.div {
margin: 0 auto;
}
flexbox レイアウトは、要素を柔軟に配置するためのレイアウト方式です。displayプロパティに flex を設定し、align-itemsプロパティに center を設定することで、div内のテキストを垂直方向に中央揃えできます。
.div {
display: flex;
align-items: center;
}
.div {
display: grid;
align-items: center;
}
positionプロパティは、要素の位置を指定します。positionプロパティに absolute を設定し、topとbottomに 50% を設定し、transformプロパティに translateY(-50%) を設定することで、div内のテキストを垂直方向に中央揃えできます。
.div {
position: absolute;
top: 50%;
bottom: 50%;
transform: translateY(-50%);
}
上記の方法の中から、目的に合った方法を選びましょう。それぞれの方法の特徴と使い分けを理解することで、より柔軟にレイアウトを組むことができます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSSでdiv内のテキストを垂直方向に中央揃えする方法</title>
<style>
.div {
width: 300px;
height: 200px;
border: 1px solid #ccc;
}
/* text-align */
.div.text-align {
text-align: center;
}
/* line-height */
.div.line-height {
height: auto;
line-height: 200px;
}
/* margin */
.div.margin {
margin: 0 auto;
}
/* flexbox */
.div.flexbox {
display: flex;
align-items: center;
}
/* grid */
.div.grid {
display: grid;
align-items: center;
}
/* position */
.div.position {
position: absolute;
top: 50%;
bottom: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<h1>CSSでdiv内のテキストを垂直方向に中央揃えする方法</h1>
<h2>text-align</h2>
<div class="div text-align">
これはテキストです。
</div>
<h2>line-height</h2>
<div class="div line-height">
これはテキストです。
</div>
<h2>margin</h2>
<div class="div margin">
これはテキストです。
</div>
<h2>flexbox</h2>
<div class="div flexbox">
これはテキストです。
</div>
<h2>grid</h2>
<div class="div grid">
これはテキストです。
</div>
<h2>position</h2>
<div class="div position">
これはテキストです。
</div>
</body>
</html>
上記コードを実行すると、6つのdivが表示されます。それぞれのdiv内のテキストは垂直方向に中央揃えされています。
補足
上記のサンプルコードでは、widthとheightプロパティを使用してdivのサイズを固定しています。divのサイズが可変の場合は、他の方法を使用する必要があります。
CSSでdiv内のテキストを垂直方向に中央揃えする他の方法
CSS Grid レイアウトの place-items プロパティは、要素を水平方向と垂直方向に同時に配置することができます。place-items プロパティに center を設定することで、div内のテキストを水平方向と垂直方向に中央揃えできます。
.div {
display: grid;
place-items: center;
}
.div {
display: grid;
align-content: center;
}
.div {
display: flex;
justify-content: center;
}
CSSの transform プロパティを使用して、要素を垂直方向に移動することができます。transform プロパティに translateY(-50%) を設定することで、div内のテキストを垂直方向に中央揃えできます。
.div {
position: relative;
transform: translateY(-50%);
}
CSSの margin プロパティ
.div {
margin: auto;
}
.div {
padding: 50px 0;
}
CSSの line-height プロパティ
.div {
height: 200px;
line-height: 200px;
}
CSSの position プロパティと top プロパティ
position プロパティを absolute に設定し、top プロパティに 50% を設定することで、要素を垂直方向に中央揃えできます。
.div {
position: absolute;
top: 50%;
}
.div {
position: absolute;
bottom: 50%;
}
.div {
position: absolute;
transform: translateY(-50%);
}
CSSの vh ユニット
vh ユニットを使用して、要素の高さをビューポートの高さの割合で設定することができます。height プロパティに 50vh を設定することで、div内のテキストを垂直方向に中央揃えできます。
.div {
height: 50vh;
}
CSSの calc() 関数
calc()
css vertical-alignment
