[HTML] CSSを使って文字を上下左右中央に表示する方法

[HTML] CSSを使って文字を上下左右中央に表示する方法

日付: 8月 17, 2023

以下で可能。

適当なhtmlファイル(例:CSS_Test_001.html等)に以下コードを張り付けて保存し、ブラウザから開いくとHello World!の文字がブラウザ上下左右中央に表示される。

なお、古いブラウザだと動作しないらしい。

---ここから---
<!DOCTYPE html>
<html>
  <head>
    <title>CSS Test 001</title>
    <style>
      .middle{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      }
    </style>
  </head>
  <body>
    <div class='middle'>
      <p>Hello World!</p>
  </div>
  </body>
</html>
---ここまで---

コメント