【css】中央に配置する

テキスト(インライン要素)を水平の中央に(text-align)

一番無難で楽な方法です。

.main{
 text-align: center; /*中のインライン要素を水平中央に*/
}

See the Pen
by kurosu haruka (@skysound98)
on CodePen.

text-align: center は中の要素に影響します。
中央寄せにしたいインライン要素(span,a...etc)を囲っているブロック要素(div…etc)に設定してください。

テキスト(インライン要素)を垂直の中央に(vertical-align)

.main{
  display: table-cell;/*要素をtableに*/
  vertical-align: middle;/*中身を垂直中央に*/
}

See the Pen
text-center2 by kurosu haruka (@skysound98)
on CodePen.

囲っている要素の種類をdisplay: table-cell;でtableにしてから、tableにのみ使用できるvertical-align: middle;を設定しています。

ただ、通常のブロック要素に使用すると横幅が勝手に最低限になったりと、時々問題があります。横幅を100%ではなく何かしら指定しているなら有効だと思います。

ブロック要素を水平の中央に(margin)

.inside{
  margin: 0 auto;
  width: 100px;
}

See the Pen
block-center by kurosu haruka (@skysound98)
on CodePen.

中央に寄せたい要素にmargin: 0 auto;とwidth:を設定する。

当然margin: 0 auto;の0 は上下のmarginなので好きに指定していい。

幅を指定するのは、幅を指定しないとブロック要素は横に広がれるだけ広がってしまうから。

ブロック要素を垂直の中央に(transform)

.main{
  position: relative;
}
.inside{
  position: absolute; /*親に対して絶対位置を取る*/
  top: 50%;/*上から50％の位置にする*/
  transform: translate(0, -50%);/*本体の50％持ち上げる*/
  margin: 0;
}

See the Pen
by kurosu haruka (@skysound98)
on CodePen.

transform: translate(0, -50%);はmargin分も含めた半分なので、上下のmarginを０にしておかないとその分ずれます。

親のposition: relative;は何も指定しないと子のposition: absolute; が効かないためです。

ブロック要素を中央に(margin)

.main{
  position: relative;
}
.inside{
  position: absolute; 
  top: 50%;/*上から50％の位置にする*/
  left: 50%;/*左から50％の位置にする*/
  transform: translate(-50%, -50%);/*本体の50％ずつ横と縦にずらす*/
 margin-right: -50%;/*表示が小さくならないように調整*/
}

See the Pen
block-center3 by kurosu haruka (@skysound98)
on CodePen.

left: 50%;で親要素の半分しか使えなくなっているところをmargin-right: -50%;をすることによて実質の使用範囲が変わらないようにしています。

これがないと幅が小さくなった時に50%分の余白が生まれます。

ブロック要素を中央に(grid)

.main{
  display: grid;/*グリッド要素に変更*/
  grid-template-columns: repeat(3, 1fr);/*横3等分にする*/
  grid-template-rows: repeat(3, 1fr);/*縦3等分にする*/
}
.inside{
  grid-column: 2;/*右から2番目*/
  grid-row: 2;/*上から2番目に表示*/
}

See the Pen
by kurosu haruka (@skysound98)
on CodePen.

親の要素を9分割してその真ん中に要素を置くという荒業。
このままだと中に入れている要素の高さが増えただけ上下のスペースも空きます。（1frで均等割してるので）

親に高さを指定しておけば上下は均等ににスペースが空きます。