【CSS】真ん中から「ほんの少しだけズラしたい」時の裏ワザ

ボタンや画像を真ん中に置いたはずなのに、「なんか微妙にズレてない…？」 ということ、ありませんか？そんな時に使える、スマホでもパソコンでも絶対に崩れない微調整テクニックです。

📝 こう書きます

CSS

.gazou {
  position: absolute;
  left: 50%;  /* まず画面の真ん中に置く */
  
  /* ▼ ここがポイント！ */
  transform: translateX(-52%); 
}

💡 何が起きているの？

transform: translateX( ... ) は、「自分の体の幅」を使って位置を調整する命令です。

基準は -50% です。これを数字を変えるだけで、左右に微調整できます。

• -50% → ど真ん中（基本）
• -52% （数字を増やす） → ど真ん中より、ちょっと**「左」**へ
• -48% （数字を減らす） → ど真ん中より、ちょっと**「右」**へ

🙆‍♀️ なぜこれが便利なの？

「左に 5px ズラす」のように固定の数字（px）で指定してしまうと、画面が小さいスマホではズレすぎてしまうことがあります。

このパーセント（%）を使う書き方なら、「画像の大きさに対してちょっとだけ」という指示になるので、スマホでもPCでもいい感じの位置関係をキープしてくれます。