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

CSS

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を使用して中央寄せする方法になります。これを使用することで、要素を画面の中央に配置することができます。