コンテンツの中央配置
2020-06-15
コンテンツ要素の上下左右の中央配置について、いくつか挙げていきたいと思います。
サンプルとして、下記のようなソースをベースに記述していきます。
|
1 2 3 4 5 |
<div class="sample-outer"> <div class="inner"> <p>Sample</p> </div> </div> |
<sample-outer>への高さの指定や背景などは、参考程度に。
position: absolute
コンテンツのサイズが決まっている場合は、position:absoluteと margin で調整していきます。
Sample
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<style> .sample-outer { position: relative; width: 100%; height: 150px; } .sample-outer .inner { width: 80px; height: 80px; position: absolute; left: 50%; top: 50%; margin-top: -40px; margin-left: -40px; background: #fff; } .sample-outer p { text-align: center; } </style> |
left:50%; top: 50%; を指定して、中心部に。さらに、marginで、コンテンツの半分の移動するという方法です。
同じような方法で、
Sample
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<style> .sample-outer { position: relative; width: 100%; height: 150px; } .sample-outer .inner { width: 80px; height: 80px; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; background: #fff; } .sample-outer p { text-align: center; } </style> |
left/top/right/bottom の値を ０、 margin: auto; を指定する方法です。
どちらも中央配置したいコンテンツのサイズ(幅/高さ)を指定する必要があります。
transformを活用
コンテンツのサイズは指定しない、または、可変となる場合が多い時には、transformを使用します。
Sample
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<style> .sample-outer { position: relative; width: 100%; height: 150px; } .sample-outer .inner { position: absolute; left: 50%; top: 50%; background: #fff; transform: translate(-50%,-50%); } .sample-outer p { text-align: center; } </style> |
この方法は、コンテンツのサイズサイズを指定してもしなくても、大丈夫ですが、transformのアニメーションを使用している場合など、指定の方法に気を付ける必要があります。
display:table
次に、table-cellを指定する方法ですが、コンテンツが２つある場合でも上下中央に配置できますので、比較も兼ねて、下記のようなソースにしてみます。
|
1 2 3 4 5 6 7 8 |
<div class="sample-outer"> <div class="inner box-1"> <p>Sample</p> </div> <div class="inner box-2"> <p>テキストテキスト</p> </div> </div> |
Sample
テキストテキスト
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<style> .sample-outer { display: table; width: 100%; height: 150px; padding: 10px; } .sample-outer .inner { display: table-cell; width: 50%; height: 100%; vertical-align: middle; } .sample-outer .inner.box-1 { background: #ecc;} .sample-outer .inner.box-2 { background: #fff;} .sample-outer p { text-align: center; } </style> |
display:table-cellにすることで、vertical-alignを適用することができます。
高さを100vhなどに指定すれば、画面いっぱいなどにも対応できますが、２つコンテンツを並べている場合、コンテンツ間にスペースはできません。
display:flex
次に、flexを指定する方法です。
テキストテキスト
テキストテキスト
テキストテキスト
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<style> .sample-outer { display: flex; justify-content: space-between; align-items:center; width: 100%; height: 150px; padding: 10px; } .sample-outer .inner { width: 45%; } .sample-outer .inner.box-1 { background: #ecc;} .sample-outer .inner.box-2 { background: #fff;} .sample-outer p { text-align: center; } </style> |
display:flexの場合は、align-itemsで上下の位置を調整することができます。
こちらは、コンテンツ間のスペースを確保することもできますが、内包するdivに高さを入れるとその高さに対して、上下中央に配置され、内容量が違い、かつ、背景を付けたい場合などは、高さを揃えたりもしないといけないため、ちょっとやり方を考えないといけません。
と、このような形で、それぞれに一長一短といった違いがありますので、サイトの仕様などによって、使い分けることが望ましいと思います。
個人的には、transformをよく使用しています。