CSSで要素を中央寄せにする方法

2018.07.16

CSSで要素を中央寄せにする方法は、要素がインライン要素かブロックレベル要素かで異なります。 インライン要素 → text-align : center;
ブロックレベル要素 → margin : 0 auto; ブロックレベル要素の中には、ブロックレベル要素やインライン要素を含むことができます。しかし、インライン要素の中には、ブロックレベル要素を含むことができないということも注意しましょう。

また、absoluteで中央寄せでする方法は以下です。
①要素が固定の場合


    position : absolute;
    top : 50%;
    left : 50%;
    margin-top : -50%;
    margin-left : -50%;
            
②全画面を覆う場合

    position : absolute;
    top : 0;
    left : 0;
    bottom : 0;
    right : 0;
            
③要素自身を基準にする場合

    position : absolute;
    top : 50%;
    left : 50%;
    transform : translateX(-50%);
    transform : translateY(-50%);
            
もしも要素が中央寄せにならないなと思ったら、これを思い出してみてください。