【初心者でも簡単】CSSで要素を中央寄せする4つの方法を解説
2024-05-14
CSS で <div> 要素内の要素を中央に配置する方法
text-align: center; を使用する
これは、インライン要素またはインラインブロック要素を親要素の中央に配置する最も簡単な方法です。
.parent {
text-align: center;
}
.child {
/* 子要素 */
}
この場合、.child 要素は .parent 要素の中央に配置されます。
margin: auto; を使用する
これは、ブロックレベル要素を水平方向に中央に配置するのに役立ちます。
.child {
margin: 0 auto;
}
この場合、.child 要素は親要素の左右の余白が自動的に調整され、水平方向の中央に配置されます。
フレックスボックスは、要素を柔軟にレイアウトするのに役立つ CSS モジュールです。要素を水平方向と垂直方向の両方の中央に配置するには、以下のプロパティを使用します。
.parent {
display: flex;
justify-content: center;
align-items: center;
}
.child {
/* 子要素 */
}
補足
- 複数の方法を組み合わせて使用することもできます。
上記以外にも、CSSで要素を中央に配置する方法がありますので、ご自身のニーズに合った方法を見つけてみてください。
text-align: center; を使用する
<!DOCTYPE html>
<html>
<head>
<style>
.parent {
text-align: center;
}
.child {
/* 子要素 */
}
</style>
</head>
<body>
<div class="parent">
<p class="child">中央寄せされたテキスト</p>
</div>
</body>
</html>
margin: auto; を使用する
<!DOCTYPE html>
<html>
<head>
<style>
.child {
margin: 0 auto;
width: 200px; /* 要素の幅 */
}
</style>
</head>
<body>
<div class="child">
中央寄せされたコンテンツ
</div>
</body>
</html>
フレックスボックスを使用する
<!DOCTYPE html>
<html>
<head>
<style>
.parent {
display: flex;
justify-content: center;
align-items: center;
}
.child {
/* 子要素 */
width: 200px; /* 要素の幅 */
}
</style>
</head>
<body>
<div class="parent">
<div class="child">中央寄せされたコンテンツ</div>
</div>
</body>
</html>
上記はあくまで基本的な例です。実際のレイアウトに合わせて、コードを調整する必要があります。
CSS で要素を中央に配置するその他の方法
position: absolute; と top: 50%; left: 50%; を使用する
この方法は、要素を親要素の相対的な位置に配置するのに役立ちます。
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 親要素の中央からのオフセットを調整 */
}
この場合、.child 要素は親要素の水平方向と垂直方向の中央に配置されます。 transform プロパティを使用して、親要素の中央からのオフセットを調整することもできます。
.parent {
display: grid;
place-items: center;
}
.child {
/* 子要素 */
}
CSS 変数を使用して、中央位置を計算することもできます。
:root {
--center-x: 50%;
--center-y: 50%;
}
.child {
position: absolute;
top: var(--center-y);
left: var(--center-x);
transform: translate(-50%, -50%);
}
.child {
position: absolute;
top: calc(50% - var(--child-height) / 2);
left: calc(50% - var(--child-width) / 2);
}
この場合、.child 要素は親要素の水平方向と垂直方向の中央に配置されます。 calc() 関数を使用して、要素の高さ (--child-height) と幅 (--child-width) に基づいて中央位置を調整できます。
css
