上下左右中央揃えって意外と難しいですよね。私も初心者の頃はバグに何度も苦しめられました。
そこで今回は、上下左右中央揃えの方法を初心者にも分かりやすい形で紹介していきます。
お役に立てれば幸いです。
目次
子要素の [display: block;] が1つだけの場合
まずはじめに、子要素の [display: block;]（＝ブロック要素） が1つだけの場合の上下左右中央揃えを紹介します。
[position: absolute] を使う
簡単な説明
親要素に[position: relative]、子要素に[position: absolute]を適用した上で、
top・leftプロパティを使って、子要素の配置を中央に持っていきます。
使用するプロパティ
使用するプロパティは下記のとおりです。
- width
- height
- position: relative;
- position: absolute;
- top
- left
- calc
コードの記述例
htmlは次のとおり記述します。
1 2 3 4 5 6 | <div class="parent"> ここは外側です <div class="child"> ここは内側です </div> </div> |
CSSは次のとおり記述します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | .parent { width: 500px; /*-- 好きな数値 --*/ height: 500px; /*-- 好きな数値 --*/ background-color: red; /*-- 無くても良い --*/ margin: auto; position: relative; } .child { width: 250px; /*-- 好きな数値 --*/ height: 250px; /*-- 好きな数値 --*/ background-color: green; /*-- 無くても良い --*/ margin: auto; position: absolute; top: calc((500px - 250px)/2); /*-- [(親height)-(子height)]÷2 --*/ left: calc((500px - 250px)/2); /*-- [(親width)-(子width)]÷2 --*/ ｝ |
補足事項
親のwidthから子のwidthを引いた値を2で割った値を、子要素のtop・leftプロパティに記入します。
むずかしければ、次のことだけ覚えればオッケー。
topの値：{(親height)-(子height)}÷2
leftの値：{(親width)-(子width)}÷2
なお、親要素のwidthはパーセント（％）で記入しても良いです。横幅いっぱいに要素を表示させたい場合はwidthに100％と記入しましょう。
子要素の [display: block;] が2つ以上の場合
次は、子要素の [display: block;]（＝ブロック要素） が2つ以上の場合の上下左右中央揃えを紹介します。
[flex-direction: column;] を使う
大まかな説明
フレックスボックスといえば、[display: block;]（＝ブロック要素） を横並びにできるイメージが強いですが、[flex-direction: column;]を使えば縦並びに配置させることもできます。
今回は、[flex-direction: column;]を使って縦並びに配置したあと、[align-items: center;]と[justify-content: center;]を使って、複数の子要素をまとめて左右中央揃えにしていきます。
使用するプロパティ
使用するプロパティは下記のとおりです。
- display: flex;（フレックスボックスを使う）
- flex-direction: column;（子要素を縦方向に並べる）
- align-items: center;（columnの場合に左右中央揃え）
- justify-content: center;（columnの場合に上下中央揃え）
コードの記述例
htmlは次のとおり記述します。
1 2 3 4 5 | <div class="parent"> <p class="child1">子です1</p> <p class="child2">子です2</p> <p class="child3">子です3</p> </div> |
CSSは次のとおり記述します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | .parent { display: flex; flex-direction: column; width: 100%; height: 500px; background-color: red; /* 無くても良い */ align-items: center; justify-content: center; } .child1 { width: 100px; /* 無くても良い */ background-color: yellow; /* 無くても良い */ padding-top: 20px; /* 無くても良い */ padding-bottom: 20px; /* 無くても良い */ } .child2 { width: 100px; /* 無くても良い */ background-color: green; /* 無くても良い */ padding-top: 30px; /* 無くても良い */ padding-bottom: 30px; /* 無くても良い */ } .child3 { width: 100px; /* 無くても良い */ background-color: blue; /* 無くても良い */ padding-top: 40px; /* 無くても良い */ padding-bottom: 40px; /* 無くても良い */ } |
とりあえずフレックスボックスが最強ということで。
子要素のCSSは勉強用に記述しました。無くても良いです。
この手法は子要素のブロック要素が1つの場合でも使えます。
