要素を中央に表示したい！CSSでtext-align:center が効かないときに確認すること
text-alignは子要素、孫要素のインライン要素やテキストを揃える方向を設定するプロパティです。
ブロックレベル要素の配置場所を設定することはできません。
👉 align-items:center;が効かない場合はコチラ
よくある間違いが、
ブロック要素、例えばボタンなどの要素をセンタリングしたい時に、
ボタン自体にtext-align:center;を設定しているパターンです👇こんな感じ。
<a href="#" class="btn">ボタン</a>.btn{
display:block;
width:200px;
padding:1em 0;
text-align:center;
}上記のコードでは、ボタンの要素の中でボタンという文字がセンタリングされるだけでボタン自体は中央に移動しません。
ボタン自体（ブロックレベル要素）の位置はmarginで調整します。
中央に配置したい時は左右のマージンをautoに💡
同じセンタリングでもセンタリングしたい要素や内容によって設定方法が違うので、しっかり区別しておくことが大事です。
上下も中央に配置する方法
ここまでは水平方向を中央に揃えるお話ですが、ここからは垂直方向も中央に表示したい場合、上下左右を中央にする方法ついて。
いくつかの場面を例に説明していきます🙋♀️
- ボタンの中の文字を上下左右中央に表示する方法
- ボタンのサイズを固定しないでボタンの中央に文字を配置する方法
- 要素をコンテンツ（ページ）の上下左右中央に配置する方法
- display:flex;を使って簡単に中央に配置する方法
ボタンの中の文字を上下左右中央に配置する
📌ボタンのサイズを決めて、中の文字を上下左右中央に配置するベーシックな方法
<a href="#" class="btn">button</a>.btn{
display:block;
width:100px;
height:50px;
background:#ccc;
border-radius:25px;
text-align:center;
line-height:50px;
}まずは、display:block;で<a>タグをブロックレベル要素にして、幅と高さの設定ができるようにします。
好きな幅と高さでボタンの形を作ったら、
text-align:center;で水平方向を中央揃えに
上下の中央揃えは、ボタンの高さ（height）とテキストの行の高さ（line-height）を同じにすることで実装します💡
今のままだと、ボタン自体は左寄りになっているので、ボタン自体をページ、またはコンテンツの中心に持ってきたい場合は、marginの左右をautoにしましょう。
text-align:center;とmargin:auto;の違いをしっかり区別しておくことが大事👌
上記の方法の場合、例えば、「more」とか、「次へ」など短いワードのボタンの場合ならOKですが、ボタン内の文字数が多くなった場合に、ボタンのエリアに文字がおさまらなくなってしまいます。。。😇
文字数が多くなっても大丈夫なボタンの設計を考えてみます。
ボタンのサイズを固定しないで上下左右中央に文字を表示したい場合
📌ボタンの余白部分（padding）で上下と左右で同じ値を設定する
<a href="#" class="btn">button</a>.btn{
display:inline-block;
background:#ccc;
border-radius:25px;
text-align:center;
padding:25px 50px;
}この場合は、ボタンの中の文字の量に合わせてボタンのサイズが変わります。
余白（padding）の値でボタンの中の文字からボタンの外側までの距離だけを設定して、ボタンをデザインしていきます💡
注意点は、ボタン自体をページの中央に表示したい場合に、先ほどと同様にmarginの左右をautoにしても中央には表示されません🤭
display:inline-block;の場合にはmargin:auto;が適用されないためです。
この場合は、ボタンの親要素にtext-align:center;を追加してボタンをページの中央に表示することができます。
コンテンツをページなどの上下左右中央に表示したい
コンテンツ自体をページや、親要素の中の上下左右中央に表示したい場合はについて。
例えば、先に作ったボタン自体をページ（または親要素）の中央に表示したい場合には、position:absolute;とtransform:translate();を使います💡
<a href="#" class="btn">button</a>.btn{
display:inline-block;
background:#ccc;
border-radius:25px;
text-align:center;
padding:25px 50px;
/*以下が中央に表示するための記述です*/
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}position:absolute;でまずは絶対位置配置にします。
top:50%;、left:50％とすることで、基準とするエリア内で、上から50%、左から50%の位置にボタンを配置することができます。
この場合の50%とは、基準とするエリアの幅や高さを100％として計算するので、ボタンは、親要素の中央の位置を左上にして配置されます👇こんな感じ。
この状態から、ボタンの横幅の半分右に、ボタンの高さの半分上にずらせばボタンがエリアの中央に表示できます。
そこで、transformプロパティのtranslate()を使用します💡
transformは要素を変形するプロパティで、要素を回転させたり、移動させたり、傾斜させたりすることができます。
translate()は要素を移動させることができる関数です。
- transform:translate(X軸方向の移動量, Y軸方向の移動量);
- 要素を移動して配置する
- transform:translateX(X軸方向の移動量);
- 要素を水平方向に移動して配置する
- transform:translateY(Y軸方向の移動量);
- 要素を垂直方向に移動して配置する
ここでポイントなのが、「基準が要素自体であること」です👀
translate(100%,100%);とすると、要素の横幅分左に、要素の高さ分下へ移動して配置されます💡
よって、要素の横幅の半分右に、要素の高さの半分上に移動したいので、
transform:translate(-50%, -50%);という記述で、要素を親要素の中央に配置することができます。
基準が要素自体なので、要素のサイズが変形してもOKなので、便利ですね👌
display:flex;を使って簡単に上下左右中央に配置する方法
実はflexboxを使うと簡単に上下左右中央に配置できてしまいます。
本来は要素を横に並べたり、縦に並べたりするためのものですが、
flexboxでは様々なプロパティがあって並べ方を細かく指定できるので、
上下左右中央に配置することができます💡
flexboxでは、並べたい要素を垂直方向と水平方向の揃え方を指定することができます。
まずはjustify-contentから💡
justify-contentではflex-boxで並べている方向に対しての配置方法です。
flex-direction:row;（初期値）であれば、水平方向で、flex-direction:column;であれば垂直方向の配置の指定になります。
- justify-content:center;
- 中央を基準に配置する
- justify-content:end;
- 末尾を基準に配置する
- justify-content:start;
- 最初を基準に配置する
つぎにalign-items💡
これは、flexboxで並べている方向と垂直に交わる軸方向、つまりjustify-contentで並べている方向と垂直に交わる軸方向の配置の指定になります。
- align-items:center;
- 中央を基準に配置する
- align-items:end;
- 末尾を基準に配置する
- align-items:start;
- 最初を基準に配置する
justify-contentもalign-itemsも値は他にもあるのですが、
今回は、水平方向も垂直方向も中央に配置したいので、2つのプロパティの値をcenterにします💡
<div class="box">
<p>HELLO!</p>
</div>.box{
display:flex;
justify-content:center;
align-items:center;
}この3行だけで、「HELLO!」は.boxの中央に配置されます。
ボタンなどいろいろなものに適用できます。
便利すぎて気絶しそうですね😇