【初心者向け】margin: 0 auto; でdivを垂直方向に中央揃えする方法
HTMLとCSSでdivを垂直方向に中央揃えする方法
margin: 0 auto; を使う
親要素の margin プロパティに 0 auto を設定すると、子要素は水平方向に中央に配置されます。この方法は、子要素の幅が固定されている場合にのみ有効です。
<div class="parent">
<div class="child">
コンテンツ
</div>
</div>
.parent {
width: 400px;
}
.child {
margin: 0 auto;
}
display: flex; と align-items: center; を使う
親要素に display: flex; を設定すると、その要素はフレックスボックスレイアウトになります。そして、align-items: center; を設定すると、子要素は垂直方向に中央に配置されます。
<div class="parent">
<div class="child">
コンテンツ
</div>
</div>
.parent {
display: flex;
align-items: center;
}
position: absolute; と top: 50%; を使う
子要素に position: absolute; を設定すると、その要素は相対的に配置されます。そして、top: 50%; を設定すると、子要素は親要素の上端から50%の位置に配置されます。さらに、transform: translateY(-50%); を設定すると、子要素は垂直方向に中央に配置されます。
<div class="parent">
<div class="child">
コンテンツ
</div>
</div>
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
padding: 0; と line-height: equal; を使う
子要素に padding: 0; を設定すると、子要素のパディングが0になります。そして、line-height: equal; を設定すると、子要素の行高が子要素の高さと同じになります。この方法は、子要素がテキストのみの場合にのみ有効です。
<div class="parent">
<div class="child">
コンテンツ
</div>
</div>
.parent {
height: 200px;
}
.child {
padding: 0;
line-height: equal;
}
上記の方法のどれを選択するかは、プロジェクトの要件によって異なります。どの方法が最適かわからない場合は、いくつかの方法を試してみて、比較検討することをお勧めします。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Vertically centering a div</title>
<style>
.parent {
width: 400px;
height: 200px;
border: 1px solid black;
}
.child {
/* 方法 1 */
/* margin: 0 auto; */
/* 方法 2 */
/* display: flex;
align-items: center; */
/* 方法 3 */
/* position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); */
/* 方法 4 */
padding: 0;
line-height: equal;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
コンテンツ
</div>
</div>
</body>
</html>
上記コードでは、4つの方法すべてをコメント化しています。コメントを外して、それぞれの方法を試してみてください。
各方法の詳細
方法 1: margin: 0 auto; を使う
.child {
margin: 0 auto;
}
この方法は、子要素の幅が固定されている場合にのみ有効です。子要素の幅が固定されていない場合は、子要素は親要素の左右に余白を持って配置されます。
方法 2: display: flex; と align-items: center; を使う
.child {
display: flex;
align-items: center;
}
方法 3: position: absolute; と top: 50%; を使う
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
方法 4: padding: 0; と line-height: equal; を使う
.child {
padding: 0;
line-height: equal;
}
この方法は、子要素がテキストのみの場合にのみ有効です。子要素がテキスト以外の場合は、子要素は垂直方向に中央に配置されません。
display: table; と display: table-cell; を使う
<div class="parent">
<div class="child">
コンテンツ
</div>
</div>
.parent {
display: table;
width: 400px;
height: 200px;
border: 1px solid black;
}
.child {
display: table-cell;
vertical-align: middle;
}
display: grid; と align-items: center; を使う
<div class="parent">
<div class="child">
コンテンツ
</div>
</div>
.parent {
display: grid;
width: 400px;
height: 200px;
border: 1px solid black;
}
.child {
align-self: center;
}
CSS Grid の place-items プロパティを使って、子要素を水平方向と垂直方向に中央に配置することができます。
<div class="parent">
<div class="child">
コンテンツ
</div>
</div>
.parent {
display: grid;
width: 400px;
height: 200px;
border: 1px solid black;
}
.child {
place-items: center;
}
html css
