More than 5 years have passed since last update.

CSSでblock要素を上下左右中央寄せにできなかった原因と解決

Posted at 2019-03-08

問題

CSSでblock要素を上下左右中央寄せしたくて

position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 任意の値
height: 任意の値

こんな感じのCSSを入れたけど、上手くいかなかった。

別CSSファイルで

* {
  margin:0;
  padding:0;
}

を入れていて、この margin:0; が原因だった。

position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto; /* <-- 追加 */
width: 任意の値
height: 任意の値

これで解決。