css水平中央、垂直中央、水平垂直中央

1.水平方向中央
(1)親エレメントがブロックレベルエレメント、子エレメントが行内エレメントである場合、子エレメントが水平方向に中央に配置されるようにするには、親エレメントにtext-align:centerを定義して水平方向に中央に配置できます.
(2)親要素と子要素がブロックレベルの要素である場合、子要素にmargin:0 auto実装水平中央を設定できます.
(3)親要素をtable-cellに設定し、text-align:centerを設定します.(使用を慎む)
2.垂直方向中央
(1)サブエレメントが行内ブロックエレメントである場合、vertical-align:middleを使用して垂直中央を実現できますが、効果が得られないことがよくあります.慎重に使用し、baselineベースで位置合わせします.vertical-alignとbaselineについては、このブログを参照してください.https://www.cnblogs.com/starof/p/4512284.html?utm_source=tuicool&utm_medium=referral
(2)サブエレメントが単行テキストの場合、サブエレメントline-heightの高さと親エレメントの高さが一致して垂直中央になるように設定できます.
もちろん、以下の水平垂直中央の方法も使えます.
3.水平垂直中央
(1)絶対位置決め(position:absolute)+margin-top,margin-left負自己幅半分の値

.parent{
    width: 600px;
    height: 600px;
    background-color:#380fff;
    position: relative;
}
.son{
    width: 200px;
    height: 200px;
    background-color: aqua;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -100px;
}

(2)絶対位置決め(position:absolute)+transform:translate(-50%,-50%)

.parent{
    width: 600px;
    height: 600px;
    background-color:#380fff;
    position: relative;
}
.son{
    width: 200px;
    height: 200px;
    background-color: aqua;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);/*               50%*/
}

(3)絶対位置決め(position:absolute)+各方位距離0+margin:auto

.parent{
    width: 600px;
    height: 600px;
    background-color:#380fff;
    position: relative;
}
.son{
    width: 200px;
    height: 200px;
    background-color: aqua;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

(4)絶対位置決め(position:absolute)+calc(計算属性)

.parent{
    width: 600px;
    height: 600px;
    background-color:#380fff;
    position: relative;
}
.son{
    width: 200px;
    height: 200px;
    background-color: aqua;
    position: absolute;;
    top: calc(50% - 100px); 
    left: calc(50% - 100px); /*          */
}

(5)tableレイアウトですが、今はtableレイアウトはお勧めできません
(6)flexレイアウト

.parent{
    width: 600px;
    height: 600px;
    background-color:#380fff;
    display: flex;
    justify-content: center;
    align-items: center;
}
.son{
    width: 200px;
    height: 200px;
    background-color: aqua;
}

水平垂直方向の中央に位置する詳細については、https://segmentfault.com/a/1190000016389031?utm_source=tag-newestこのブログ