ブロックレベル要素のセンタリング

css

HTML、CSSの基本的なことだけど、「なるほど！」だったのでめもです。

インライン要素

インライン要素は以下のようにstyleを指定すれば簡単に縦横がセンタリングできます。

text-align: center;
height: 10rem;
line-height: 10rem;

ブロック要素

ブロック要素はインラインと同じ方法ではセンタリングできない。。。
ということでschooで教えてもらった方法が以下。

div {
    height: 300px;
    position: relative;
}
p {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 300px;
    height: 50px;
}

  • positionで親子を指定する

  • 子要素に top, bottom, left, rightに同じ値を設定して（0じゃなくても同じ値ならOK）、margin: auto;にする。

参考

Visual formatting model details