【完全ガイド】div要素の垂直方向中央揃え（flexbox、margin、position、line-height、table-cell、CSS Grid）
2024-04-03
CSSでdiv要素を垂直方向に中央揃えする方法
flexboxは、要素を柔軟に配置するためのレイアウトシステムです。div要素を垂直方向に中央揃えするには、親要素に display: flex と align-items: center を設定します。
.parent {
display: flex;
align-items: center;
}
この方法は、簡単で汎用性が高いため、最もよく使われます。
margin: 0 auto; は、要素の左右に等しいmarginを設定します。親要素の高さがある場合、この方法を使ってdiv要素を垂直方向に中央揃えすることができます。
.div {
margin: 0 auto;
}
ただし、親要素の高さがない場合、この方法は機能しません。
position: absolute; を使ってdiv要素を親要素の中央に配置することができます。
.div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
この方法は、他の方法よりも複雑ですが、より多くのコントロールが可能になります。
- 簡単で汎用性の高い方法を求めている場合は、flexboxを使うのがおすすめです。
- 親要素の高さがない場合、またはより多くのコントロールが必要な場合は、
position: absolute;を使うのがおすすめです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>サンプルコード</title>
<style>
.parent {
height: 200px;
border: 1px solid #ccc;
}
.div {
width: 100px;
height: 50px;
background-color: #f00;
}
/* flexboxを使う */
.flex {
display: flex;
align-items: center;
}
/* margin: 0 auto;を使う */
.margin {
margin: 0 auto;
}
/* position: absolute;を使う */
.absolute {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<h2>flexboxを使う</h2>
<div class="parent flex">
<div class="div"></div>
</div>
<h2>margin: 0 auto;を使う</h2>
<div class="parent">
<div class="div margin"></div>
</div>
<h2>position: absolute;を使う</h2>
<div class="parent">
<div class="div absolute"></div>
</div>
</body>
</html>
各方法の詳細
flexboxを使う
.flex {
display: flex;
align-items: center;
}
display: flex;は、親要素をflexboxレイアウトに設定します。align-items: center;は、子要素を親要素の垂直方向の中央に配置します。
margin: 0 auto;を使う
.margin {
margin: 0 auto;
}
margin: 0 auto;は、要素の左右に等しいmarginを設定します。
position: absolute;を使う
.absolute {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
position: absolute;は、要素を絶対配置に設定します。top: 50%;は、要素の上端を親要素の上端から50%の位置に配置します。transform: translate(-50%, -50%);は、要素を50%ずつ左右に移動します。
line-height は、行の高さのプロパティです。親要素の高さに一致する line-height を設定することで、div要素を垂直方向に中央揃えすることができます。
.parent {
height: 200px;
line-height: 200px;
}
.div {
display: inline-block;
}
ただし、この方法は、親要素内にテキストがない場合にのみ有効です。
table-cellを使う
display: table-cell; を使ってdiv要素をテーブルセルのように表示することができます。親要素に display: table; を設定することで、div要素を垂直方向に中央揃えすることができます。
.parent {
display: table;
height: 200px;
}
.div {
display: table-cell;
vertical-align: middle;
}
この方法は、IE8以前のブラウザではサポートされていないことに注意が必要です。
.parent {
display: grid;
height: 200px;
align-items: center;
}
.div {
width: 100px;
height: 50px;
background-color: #f00;
}
この方法は、比較的新しい機能なので、すべてのブラウザでサポートされているわけではありません。
- 親要素内にテキストがない場合、またはIE8以前のブラウザでもサポートしたい場合は、
line-heightを使うのがおすすめです。
div要素を垂直方向に中央揃えするには、さまざまな方法があります。それぞれの方法のメリットとデメリットを理解して、状況に合わせて最適な方法を選びましょう。
html css alignment
