ブロック要素を上下左右中央揃えするやり方

上下左右中央揃えにする3つのやり方

備忘録
私が間違っている可能性もあるので他の方々の解説も見ることをお勧めします。
参考にしたサイト（https://style.potepan.com/articles/22733.html）

1.margin: auto;を使う

中央揃え①

.親要素 {
  position: relative;
}
.子要素 {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  
    margin: auto;
}

left, right, widthプロパティが、auto以外（何かしらの数値が入っている状態）で、margin:autoを指定した場合、左右の余白が均等になるというHTMLの仕様があり（上下も同じ）、これを利用して上下左右で中央揃えにしているらしい。

出力例（白色の部分）

左右中央揃えのみをしたい場合...

中央揃え①'

.親要素 {
    position: relative;
}
.子要素 {
    position: absolute;
    right: 0;
    left: 0;
  
    margin: auto;
}

といった具合にtopとbottomの記述を除けば左右中央揃えができる。
他にも左右中央のやり方はあるので手段の一つとして覚えておくといいかも。

※ 上下中央揃えがしたい場合はrightとleftを除く。

出力例（白色の部分）

2.transformを使う

中央揃え②

.親要素 {
    position: relative;
}
.子要素 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit-transform: translateY(-50%) translateX(-50%);
    /* -webkitはtransformに対応していないブラウザでも動作させるため */
    /* -webkitはベンダープレフィックスというものらしい */
}

topやleftは子要素の左角を基準に動くので下に50%(top50%),右に50%移動すると...

このように中央にそろわないのでそこにtransformをかけて中央にする

transformX(-50%)のみ

transformXは横に移動する

transformX(-50%)とtransformY(-50%)

transformYは縦に移動する

3.flexを使う

中央揃え②

.親要素 {
    display: flex;
    justify-content: center;
    align-items: center;
}
.子要素 {
    /* 中央揃えするためにする記述は特になし */
}

flexの場合は子要素に記述するものは特になく、親要素をflexに指定して上記2つの記述をすれば中央揃えすることができる

以上！！