CSSで余白は自動調整される上下左右中央揃えの方法4つとその違い
よく使用するCSSのテクニックとして上下左右中央があります。色々なWebサイトで紹介されていますが、あまり使わない方法まで紹介されていて少し混乱します。そこで、どんな場面でも使える width や height などを指定しなくても内容に応じて自動調整される方法のみを紹介します。
共通のHTMLとCSS
<div class="outer">
<div class="inner">上下左右中央</div>
</div>
.outer {
height: 15em;
}
上下方向は高さを指定しないと中央揃えできないので指定しています。
上下左右中央揃え
position: absolute + transform
.outer {
position: relative;
}
.inner {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
top と left は親要素を基準とした位置で、transform は自分自身の要素を基準とした値です。横幅は .outer の半分になります。width を 100% にすれば親要素の幅にすることができます。
display: table-cell
.outer {
display: table;
width: 100%;
}
.inner {
display: table-cell;
text-align: center;
vertical-align: middle;
}
後述しますが、table はかなり優秀で一番柔軟性が高いです。
display: flex + center
.outer {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
IEは flex に IE10から対応しています。
display: flex + margin
.outer {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.inner {
margin: auto;
}
margin: auto で余白が自動調整されます。
それぞれの違いは何か
4つの方法を紹介しましたが、それぞれ違う方法で表現しているのでもちろん違いがあります。違いは、指定した高さよりコンテンツが多い場合の挙動です。この特性に気をつけて、場合によって使い分けます。
position: absolute + transform
はみ出て中央寄せになります。
display: table-cell
親要素の高さが子要素のコンテンツに合わせて伸びます。
display: flex + center
はみ出て中央寄せになります。
display: flex + margin
上揃えではみ出ます。
CSS本執筆しました！！！
CSS本出します！1/29発売予定
— たかもそ＠CSS本1/29発売!! (@takamosoo) 2018年12月31日
自分がCSS学びたての頃にもっとはやく知りたかったテクニックを載せています。CSSの基礎知識について解説していないので、中級者〜向けとなります。CSS入門書を読んではみたものの、思い通りに作れない人にオススメです。
よろしくお願いします。https://t.co/fkz1dM03Pj pic.twitter.com/suYyaPqwIs