CSSでは親要素に対して子要素を中央に寄せる方法がいくつかあるので、
左右だけでなく、上下左右の中央寄せでもう迷わないように・・・まとめました。
親要素の幅指定を忘れないこと！
左右のみ中央寄せにしたい
親要素のwidth(幅)を決めてを子要素にmargin: auto;指定します。
親要素にたいして左右中央に寄ります。
margin: auto;とはmarginを自動で決める、ということです。
See the Pen
margin: auto;で左右中央寄せ by MAI (@MAIIMANISHI)
on CodePen.
上下左右中央寄せ[positionとmargin: auto;を指定]
親要素の幅を決めてposition：relative；と子要素にposition：absolute;とmargin: auto;指定
top: 0;、bottom: 0;、left: 0;、right: 0;も子要素に指定することで上下左右中央に寄ります。
See the Pen
margin: auto;とpositionで上下左右中央寄せ by MAI (@MAIIMANISHI)
on CodePen.
上下左右中央寄せ[positionとtransform]
margin: auto;を使わないやり方です。
親要素にposition：relative；、子要素にposition：absolute;指定します。
子要素にはtop: 50%;left: 50%; （親要素から上と左50%の位置）で絶対位置を指定した後、transform : translate(-50%,-50%);で子要素の幅X(横座標)、高さY(縦座標)分位置をマイナスして中央に寄せてます。-webkit-transform :translate(-50%,-50%);も忘れずに。
See the Pen
positionとtransformで上下左右中央寄せ by MAI (@MAIIMANISHI)
on CodePen.
親要素にdisplay: flex;とjustify-content: center、align-items: centerを指定
flexboxというものです。
See the Pen
flexboxで中央寄せ by MAI (@MAIIMANISHI)
on CodePen.
文字の上下左右中央寄せはline-height:親要素の高さpx;と text-align: center;
親要素のheight（高さ）のpxと子要素のline-height（行間）のpxを同じにします。これで文字が上下中央にきます。text-align: center;も親要素に追加すれば上下左右中央に寄ります。
See the Pen
文字の上下左右中央寄せ by MAI (@MAIIMANISHI)
on CodePen.
