【CSS】要素の位置を調整する top と transform: translateY(-50%) の考え方

Web制作でよく出てくるのが

「要素を上下や左右の中央にそろえたい」

「ロゴやハンバーガーボタンをきれいに配置したい」

といったレイアウト調整です。

この記事では、top・calc()・transform: translateY(-50%) を使った位置調整の仕組みを、わかりやすく解説します。

position: relative　position: absolute　position: fixed については、他でも解説しているので、気になる方はあわせてご参照ください！

1. （復習）position: fixed / absolute の基準とは？

まず、top や left で位置を指定する場合、基準となるのは 親要素 です。

つまり、top: 0; left: 0; と書けば、

に配置されます。

.my-box {
  position: fixed;
  top: 50%;
}

これは「基準の高さの 50% の位置に、要素の上端を置く」という意味です。

たとえば画面の高さが 800px なら、

→　top: 50% は「画面の上から 400px のところに要素の上端を置く」ということ。

なので、要素の高さ分ずれてしまい、本当の中央にはならない のです。

そのズレを修正するために使うのが transform: translateY(-50%)。

.my-box {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
}

こうすると、要素全体が 縦中央にぴったり揃う という仕組みです。

ロゴやボタンを「ロゴ中央に合わせたい」「余白も考慮したい」といった場合は、calc() が便利です。

例）

.vk-mobile-nav-menu-btn {
  width: 40px;
  height: 40px;
  position: fixed;
  left: 15px;
  top: calc(18px + 25px - 20px);
}

top を「ロゴの上 padding + ロゴの高さ/2 – ボタンの高さ/2」で調整

これで「ロゴ中央とボタン中央をそろえる」ことができます。

CSS の位置調整は一見複雑ですが、
「基準はどこか」「どの点を中央に揃えたいのか」 を意識すると理解しやすくなります。

実際のプロジェクトでは、ロゴやボタンを揃えるときに calc() を使ったり、縦中央にしたいときに translateY(-50%) を使ったりと、ケースバイケースで組み合わせると便利です！