例えば以下のHTMLがある。

  <body>
    <header>
      <h1>title</h1>
    </header>
  </body>

この際、h1のtitleを上下左右に中央寄せしたい場合のメモ。

方針

1. 左右の中央寄せ

テキストの左右中央寄せは、text-align:center;を使う。

header{
  height: 48px;
  background-color: white;
}

h1{
  text-align: center;
}

これで左右はOK

上下の中央寄せは、親要素と同じピクセル数でline-heightを指定してあげればできる。

header{
  height: 48px;
  background-color: white;
}

h1{
  text-align: center;
  line-height: 48px;
}

親要素のheaderは48pxなので、子要素のh1も同じ数だけline-heightしてあげる。

以上。