【保存版】HTMLとCSSでdiv要素を中央に配置する方法を初心者向けに徹底解説！
HTMLとCSSを使って、あるdiv要素を別のdiv要素の中央に配置する方法
Webページを作成する際、要素をきれいに配置することは重要です。特に、div要素を中央に配置することは頻繁に行われる操作です。ここでは、HTMLとCSSを使って、あるdiv要素を別のdiv要素の中央に配置する方法をいくつかご紹介します。
方法1： marginプロパティを使用する
これは、最も簡単で基本的な方法です。親div要素に以下のCSSを適用します。
.parent {
text-align: center;
}
このCSSは、親div要素内のすべての要素を水平方向に中央揃えにします。次に、子div要素に以下のCSSを適用します。
.child {
display: inline-block;
margin: 0 auto;
}
display: inline-block は、子div要素をインライン要素として扱い、margin: 0 auto は、左右の余白を自動的に調整して中央に配置します。
方法2： flexboxを使用する
flexboxは、要素を柔軟に配置するためのレイアウトモードです。親div要素に以下のCSSを適用します。
.parent {
display: flex;
justify-content: center;
align-items: center;
}
このCSSは、親div要素をflexコンテナにし、要素を水平方向と垂直方向に中央揃えにします。
この方法は、子div要素を絶対配置にして、親div要素の中央に配置します。親div要素に以下のCSSを適用します。
.parent {
position: relative;
}
次に、子div要素に以下のCSSを適用します。
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
position: absolute は、子div要素を絶対配置にし、top: 50% と left: 50% は、親div要素の上部と左側の50%の位置に配置します。 transform: translate(-50%, -50%) は、配置を微調整するために使用されます。
各方法の比較
- 方法1: 簡単で基本的な方法ですが、子div要素がインライン要素になるため、高さを設定することができません。
- 方法2: flexboxは、より柔軟なレイアウトが可能ですが、古いブラウザではサポートされていない場合があります。
- 方法3: すべてのブラウザでサポートされていますが、他の方法に比べて記述量が多くなります。
補足
- 上記以外にも、table要素やgrid layoutなどを利用する方法もあります。
<!DOCTYPE html>
<html>
<head>
<style>
.parent {
text-align: center;
}
.child {
display: inline-block;
margin: 0 auto;
width: 200px;
height: 100px;
background-color: #ccc;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">中央に配置されたdiv要素</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.parent {
display: flex;
justify-content: center;
align-items: center;
width: 500px;
height: 300px;
background-color: #ccc;
}
.child {
width: 200px;
height: 100px;
background-color: #f00;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">中央に配置されたdiv要素</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.parent {
position: relative;
width: 500px;
height: 300px;
background-color: #ccc;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 100px;
background-color: #f00;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">中央に配置されたdiv要素</div>
</div>
</body>
</html>
これらのコードを実行すると、いずれの場合も子div要素が親div要素の中央に配置されることが確認できます。
上記はあくまでも基本的な例であり、状況に合わせて様々なカスタマイズが可能です。
HTMLとCSSを使ってdiv要素を中央に配置するその他の方法
display: table を使用する
親div要素に display: table を設定し、子div要素に display: table-cell と vertical-align: middle を設定することで、子div要素を垂直方向に中央揃えすることができます。
.parent {
display: table;
}
.child {
display: table-cell;
vertical-align: middle;
}
この方法は、古いブラウザでも比較的安定して動作しますが、flexboxほど柔軟ではありません。
calc()関数を使用する
親div要素の幅と子div要素の幅を分かっている場合は、calc()関数を使用して、子div要素の左右マージンを自動的に計算することができます。
.child {
margin: 0 auto;
width: calc(50% - (width / 2));
}
この方法は、レスポンシブデザインに適していますが、古いブラウザではサポートされていない場合があります。
CSS Grid Layoutは、より新しいレイアウトモードであり、行と列のグリッドを作成して要素を配置することができます。親div要素をグリッドコンテナにし、子div要素をグリッドアイテムとして配置することで、中央に配置することができます。
.parent {
display: grid;
place-items: center;
}
この方法は、最新のブラウザでは幅広くサポートされていますが、複雑なレイアウトを構築する場合は、習得に時間がかかる場合があります。
- 簡単で基本的な方法であれば、方法1：marginプロパティを使用するがおすすめです。
- 柔軟なレイアウトが必要であれば、方法2：flexboxを使用するがおすすめです。
- 垂直方向に中央揃えのみが必要であれば、方法1：display: table を使用するがおすすめです。
- レスポンシブデザインに適した方法が必要であれば、方法2：calc()関数を使用するがおすすめです。
- 最新のブラウザで複雑なレイアウトを構築する必要がある場合は、方法3：CSS Grid Layout を使用するがおすすめです。
html css
