今回はテキストとブロック要素の、2点に分けてご紹介します。
それぞれ指定の仕方が異なりますので、抑えておきたいポイントです！
テキスト要素を上下左右中央に配置する場合
line-height text-align を組み合わせる
縦はheightとline-heightを同じ高さに揃えて縦中央に調整。
横はtext-align: centerで左右中央に配置します。
See the Pen テキスト 上下左右中央寄せ by morikuma (@morikuma) on CodePen.
table-cell text-align を組み合わせる
縦はdisplay: table-cellとvertical-align: middleを指定して縦中央に調整。
横はtext-align: centerで左右中央に配置します。
See the Pen テキスト要素 by morikuma (@morikuma) on CodePen.
ブロック要素を上下左右中央に配置する場合
flexbox
display: flex;
align-items: center;
justify-content: center;flexboxを使用して指定します。
こちらは親のブロック要素に指定し、
align-items:centerで縦の中央、justify-content: centerで横の中央に配置します。
See the Pen 上下左右中央 flex by morikuma (@morikuma) on CodePen.
grid
display: grid;
place-items: center;gridを使用する方法です。
こちらも親のブロック要素に指定します。
place-itemsプロパティとは、align-itemsプロパティとjustify-itemsプロパティを一括指定できるプロパティです。
place-items: centerは以下の二つを一つにまとめていることとなります。
align-items: center;
justify-items: center;flexに比べ2行で完結でき、少ない行で指定できるのが特徴ですね。
See the Pen 上下左右中央 grid by morikuma (@morikuma) on CodePen.
transform
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
※または以下でも可能
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;transformを用いて上下左右の中央に指定することができます。
top、leftとtransformプロパティの指定は以下をイメージしてみると分かりやすいです。
top:50%、left:50%で上辺と左辺を真ん中にして、transform: translate(-50%);でブロックの半分ずつを上と左に引き戻して中央に配置しています。
See the Pen Untitled by morikuma (@morikuma) on CodePen.
inset
inset と margin を使って上下左右中央に指定します。
insetプロパティは、top、right、bottom、leftに対応する一括指定です。
つまり以下の、inset : 0の部分は、top、right、bottom、leftに、0を指定しています。
これをmarginで上下左右から引っ張って中央に配置しています。
※対象要素に幅や高さの指定がないと、親要素に対して上下左右に引っ張られるため幅の各指定が必要となります。
.text {
position: fixed;
inset : 0;
margin: auto;
height: 40px;
line-height: 40px;
width: 200px;
padding: 10px;
}See the Pen 左右中央 inset by morikuma (@morikuma) on CodePen.
まとめ
以上となります。
指定の仕方はそれぞれですが、それぞれのデザインに分けて
適切に指定できればと思います。
【CSS】横の中央揃えのやり方についてはこちら
【CSS】縦の中央揃えのやり方についてはこちら