【CSS】ヘッダーのナビメニューを上下中央寄せにする方法

ヘッダーのナビメニューを上下中央寄せにする方法をご紹介します。

ナビメニューに限らずとある要素の左右中央寄せはできても、上下中央寄せとなると少し難易度が高まります。

この記事ではヘッダーのナビメニューを作るときによく使われる方法で上下中央寄せする方法と注意点について解説したいと思います。

ヘッダーのナビメニューを上下中央寄せにする方法

上下中央寄せの方法としてdisplay:flex; + align-items:center; を使う方法が一番簡単で保守性も高いです。

分かりやすいように色をつけています。

See the Pen nav-menu-center by Takuma (@takushin0202) on CodePen.

よくあるヘッダーロゴ（青色）とナビメニュー（オレンジ色）がそれぞれ左右に寄っているヘッダーのレイアウトです。

コードを詳しく見てみます。htmlはよくあるヘッダーの構造ですのでCSSを詳しく見てみます。

header {
  background: yellow;
  padding: 0 40px;
  box-sizing: border-box;
}

.header-inner {
  display: flex;
  align-items: center; /* 必ずdisplay:flex;を指定した要素に指定する */
  height: 70px;  /* headerに高さを持たせる */
}

.header-logo {
  font-size: 24px;
  color: #3e3e3e;
  font-weight: bold;
  background: skyblue;
}

/* 右に寄せるためにautoを指定 */
.header-nav {
  margin-left: auto;
  background-color: orange;
}

ul {
  display: flex; /* li要素を横並びにする */
}

li {
  list-style-type: none;
}

/* 2番目以降のliに適用させる記述の仕方 */
li + li {
  margin-left: 40px;
}

a {
  display: block; /* paddingを効かせてクリック領域を広げるため */
  color: #333;
  text-decoration: none;
  padding: 14px 0;
}

CSSのポイントとしては、display:flex;を指定した要素（今回ならheader-inner）と同じ要素に必ずalign-items:center;を指定することです（最初の頃は間違えがち）。

それからheightをheader-innerに指定することで、headerに高さを持たせていますが、header-innerにdisplay:flex;を指定した時点で、その子要素（フレックスアイテム = つまりheader-logoとheader-nav）はどちらか高い方に合わせて自動で高さを持つようになるので、フレックスアイテムそのものに高さを持たせてあげてもheightを指定したのと同じことができます。

display:flex;を指定したらなぜ自動で高さを持つのかはこちらのブログが詳しいです。

とりあえず今回はdisplay:flex; + align-items:center; の組み合わせを覚えて頂ければ嬉しいです。