よく使われる中央揃えの方法

水平方向中央:サブエレメントが行内エレメントであるかブロックエレメントであるかによって、幅が一定であるか幅が未定であるかによって、レイアウトスキームが異なります.

サブエレメントは、行内エレメント

です.
HTML:

CSS:

.father{
      width: 100%;
       height: 100px;
       text-align: center;
       background: #666;
}

サブエレメントは、幅のないブロックレベルエレメント

である.
HTML:

CSS:

.father{
text-align: center;
}

.father .child-noWidth{
display: inline;
}

サブエレメントは幅のあるブロックレベルエレメント

である.
HTML:

CSS:

.child-width{
width: 200px;
margin:0 auto;
}

以上の場合に共通する方法:flexレイアウト(かわいい適応レイアウト)

HTML:

CSS:

.father{
            display: flex;
            justify-content: center;
            background: lightblue;
            margin-top: 20px;
        }

垂直方向中央:複数行のインラインテキスト、1行のインラインテキスト、およびブロックレベル要素に分けられます.

単行インラインテキスト(行の高さと要素の高さが一致することを保証)

HTML:

CSS:

.container{
height: 30px;
line-height: 30px;
}

複数行インラインテキスト

HTML:

CSS:

.container{
            width: 100%;
            height: 200px;
            background: lightblue;
            display: table-cell;
            vertical-align: middle;
        }

3.ブロックレベル要素(positionを利用)
HTML:

    
hello

CSS:

        .f{
            position: relative;
            width: 100%;
            height:200px;
            background: lightblue;
        }
        .c{
            position: absolute;
            width: 100%;
            height: 100px;
            top: -50px;
            margin-top: 100px;
            background: lightpink;
        }

親要素の高さの半分をmargin-topの値とし、topを負の自己高さの半分に設定すると、親要素の中心基準線に合わせられます.

以上の場合に共通する方法:flexレイアウト(かわいい適応レイアウト)

HTML:

    
hello,this is child-element



    hello,this is child-element

CSS:

        .father
           {
            margin-top: 10px;
            height: 50px;
            width: 100%;
            /*       */
            display: flex;
            align-items:center;
            background: lightblue;
          }
        .child
          {
            background: lightpink;
          }