[css]position:fixedを使った場合の中央寄せ

webサイトを作る時に、「position:fixed」を使ってヘッダー部分を固定かつ中央寄せにしたい(ページをスクロールしてもついてくるように)時の備忘録。

※ヘッダーの幅をデバイスの幅より小さくすることが前提。

See the Pen fixed by ONIGIRIgogo (@onigirigogo) on CodePen.

<header>にposition: fixed; をつける。<header>の中のlogoとnavの部分を<div>で囲い、そこでmax-widthで最大サイズを決めて、さらにmargin: 0 auto;をつけて要素を左右中央にする。

ーHTMLー
<header>
  <div class="header-wrap">
    <div class="logo"><img src="画像のURL" alt=""></div>
    <div class="nav-drawer">
      <ul>
        <li><a href="./about/">ABOUT</a></li>
        <li><a href="./service/">SERVICE</a></li>
        <li><a href="./contact/">CONTACT</a></li>
      </ul>
    </div>
  </div>
</header>


ーCSSー
header {
  width: 100%;
  height: 50px;
  position: fixed;
  top: 0;
  left: 0;
  border-bottom: 1px solid #ccc;
  background-color: #fff;
  padding : 1rem 0;
}
.header-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 500px; //要素の最大値を決める
  width: 100%;
  margin: 0 auto;
}