このページにはプロモーションが含まれています。
今回は基本的なところですが、CSSによる中央寄せの方法を整理してみました。
チートシート代わりに使ってください。
左右の中央寄せをする方法
text-align: center;
基本ですね。
親要素（ブロック要素）に上記の「text-align: center;」を当てることで、子要素（ブロック要素の直下の文字、あるいはブロック要素の下にあるインライン要素）に対して左右の中央寄せ（センタリング）をしてくれます（便宜的にソースコードを埋め込んでいますが、CODEPENのサイトで見た方が分かりやすいです）
See the Pen
text-align: center by coqoon (@coqoon)
on CodePen.
margin-right: auto; margin-left: auto;
子要素（ブロック要素）に上記の「margin-right: auto; margin-left: auto;」を当てることで、親要素（ブロック要素）配下のブロック要素について左右のセンタリングをしてくれます。
See the Pen
margin-left: auto 、margin-right: auto by coqoon (@coqoon)
on CodePen.
position: absolute;
絶対位置を指定することで中央寄せすることも出来ます。
まず、通常の絶対位置の指定をします。親要素に「position: relative;」、子要素に「position: absolute;」を設定しましょう。
子要素に「left: 50%」のオフセットを設定すると、子要素の基点位置が親要素の50％分だけズレるので、「transform: translateX（-50％）;」を指定して子要素の幅の半分だけ基点位置を引き戻しましょう。
大前提として絶対指定となるので、親要素に幅をもたせておく必要がある。
See the Pen
position: absolute by coqoon (@coqoon)
on CodePen.
Flexbox
Flexboxを使用することで左右に中央寄せすることも出来ます。
親要素に「display: flex」と「justify-content: center」を当てれば、直下の文字も子要素（インライン要素かブロック要素かを問わない）もセンタリングすることが可能です（古いブラウザにはベンダープレフィックスを付けることを忘れないようにしましょう）。
See the Pen
Flexbox by coqoon (@coqoon)
on CodePen.
CSS Grid
CSS Gridを使ってもセンタリングすることが出来ます。
親要素に「display: grid」を当てて、子要素には「justify-self: center」を当てましょう（インライン要素、ブロック要素の別は問いません）。
See the Pen
CSS Grid by coqoon (@coqoon)
on CodePen.
上下の中央寄せをする方法
line-height
１行のテキストを上下に中央寄せしたいのであれば、シンプルな指定方法があります。
テキストを囲む要素の高さとline-heightに同じ高さを指定しましょう。
See the Pen
line-height by coqoon (@coqoon)
on CodePen.
vertical-align: middle;
これも基本です。
インライン要素とその兄弟要素（タグに囲まれていない文字列を含む）を上下方向にセンタリングできます。
これをブロック要素に適用したい場合には「display: table-cell」とともに設定する必要があります。
See the Pen
vertical-align: middle by coqoon (@coqoon)
on CodePen.
position: absolute;
「position: absolute」の上下版。
左右のときと同じく、親要素に高さを指定する必要がある。
See the Pen
position: absolute（縦） by coqoon (@coqoon)
on CodePen.
Flexbox
Flexboxの縦版。
親要素に「display: flex」と「align-items: center」を当てれば、直下の文字も子要素（インライン要素かブロック要素かを問わない）もセンタリングすることが可能です（古いブラウザにはベンダープレフィックスを忘れずに）。
See the Pen
Flexbox（縦） by coqoon (@coqoon)
on CodePen.
CSS Grid
CSS Gridの縦版です。
親要素に「display: grid」を当てて、子要素には「align-self: center;」を当てましょう（インライン要素、ブロック要素の別は問いません）。
See the Pen
CSS Grid（縦） by coqoon (@coqoon)
on CodePen.
