上下左右中央寄せ

上下左右中央寄せ

コンテンツは、単数、ブロック要素のみの場合(それ以外ではうまく行かない)

現在最も望ましい方法

コンテナに display: flex を適用。

justify-content: center で主軸(通常は左右)で中央寄せ。

align-items: center で上下で中央寄せ。

(この場合、ドキュメント基準になる点に注意)

code:css

display: flex;

justify-content: center;

align-items: center;

}

コンテンツ側は幅と高さだけを指定すればよい。

(正確には幅だけ設定すれば多くの場合は期待通りになるはず。)

code:css

width: 100px;

height: 100px;

}

画面の中央に要素を出したい

サイズは要素側が自動的に設定する。

コンテナ自体をどこにどうやって配置する?

画面中央であることが明確であるなら

code:css

position: fixed;

top: 0;

bottom: 0;

left: 0;

right: 0;

display: flex;

justify-content: center;

align-items: center;

}

flex を使わない方法

transform を使う方法

code:css

position: fixed;

top: 0;

bottom: 0;

left: 0;

right: 0;

}

width: 100px;

height: 100px;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%)

}

文字列の上下左右中央寄せ

table-cell を使う方法