CSS の postion で縦横(上下左右)ともに画面の中央に要素を配置する方法

こんにちはフロントエンドエンジニアのまさにょんです！

今回は、CSS の postion で縦横・上下左右ともに画面の中央に要素を配置する方法について解説していきます。

1 CSS の postion で縦横(上下左右)ともに画面の中央に要素を配置する方法
2 JavaScript書籍 Ver. 中級-上級者向け
3 JavaScript書籍 Ver. 初級者向け
4 Twitterやってます！Follow Me！
5 最近の投稿

CSS の postion で縦横(上下左右)ともに画面の中央に要素を配置する方法

CSS の postion で縦横(上下左右)ともに画面の中央に要素を配置するには、次のようにStyleを設定します。

position: absolute;で親要素を基準に、絶対位置で、配置を決める宣言をする。
top: 50%; で、要素の上端を親要素の上端から50%の位置に配置します。
left: 50%; で、要素の左端を親要素の左端から50%の位置に配置します。
transform: translate(-50%, -50%); で、要素そのものを水平方向と垂直方向にそれぞれ50%だけ移動します。

上記のようなStyle設定をすることで、指定した要素が、縦横(上下左右)ともに親要素の中心・中央に配置されます。

例えば、次の SampleCodeを実行してみてください。

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Position Robotama🔥</title>
    <style>
      /* Default Margin & Padding を初期化する */
      * {
        margin: 0;
        padding: 0;
      }

      /* CSSで、縦横ともに画面の中央に要素を配置する方法(postion活用) */
      .position-center {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); /* x軸, y軸 */
      }
    </style>
  </head>
  <body>
    <main>
      <div>
        <div class="position-center">
          <img
            src="https://masanyon.com/wp-content/uploads/2022/11/d86f450b53c3f637a992b2a5433348c7-1024x768.jpg"
            alt="ロボたま"
            width="300"
            height="300"
            style="object-fit: cover"
          />
        </div>
      </div>
    </main>
  </body>
</html>

ブラウザで表示すると、次のようにブラウザの画面の中央に Styleを設定したimgタグが配置されていることがわかります。