【CSS】positionːabsoluteで中央寄せする方法

CSSでpositionプロパティにabsoluteを指定することで、要素を絶対位置に配置することができます。これを使用して、要素を画面の中央に配置する方法を紹介します。

1.要素を中央寄せするには、positionプロパティにabsolute、topとleftプロパティを50%、transformプロパティのtranslateを使用します。

    .center {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    2.画面の中央に配置するには、親要素にposition:relativeを指定し、子要素にposition:absolute; top:50%;left:50%;を指定します。

    .parent {
        position: relative;
    }
    
    .center {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    これにより、topとleftが50%に設定され、transformのtranslateにより、要素を中央に配置します。

    上記がposition:absoluteを使用して中央寄せする方法になります。これを使用することで、要素を画面の中央に配置することができます。