More than 5 years have passed since last update.

Modalコンテンツの幅を％指定したときに左右天地の中央に配置するCSS設定

Posted at 2015-02-23

transformのtranslateを利用する。translateはX軸とY軸に指定したサイズ分移動する。

css

#modal_content {
    width: 80%;
    height:80%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

結果

縦幅、横幅のサイズが不明なコンテンツが左右天地中央に配置される。