HTMLで上下中央寄せをする方法

説明: test-position-containerはposition: relative;で相対位置を持つ親要素です。 test-position-contentはposition: absolute;を使用して絶対位置を指定しています。 top: 50%;とleft: 50%;で画面の中央に要素を配置し、transform: translate(-50%, -50%);を使って要素自体のサイズ分だけ位置を補正しています。

4. テーブルを使用する方法 HTML (index.html) div class="test-table-container"> div class="test-table-content">Centered Content CSS (styles.css) .test-table-container display: table; width: 100%; height: 100vh; > .test-table-content display: table-cell; vertical-align: middle; text-align: center; >

説明: test-table-containerをdisplay: table;に設定し、全体の高さを100vhにします。 test-table-contentをdisplay: table-cell;として設定し、vertical-align: middle;で縦方向の中央寄せ、text-align: center;で横方向の中央寄せを行います。

5. 古典的な方法 HTML (index.html) div class="test-margin-container"> div class="test-margin-content">Centered Content CSS (styles.css) .test-margin-container height: 100vh; text-align: center; > .test-margin-content display: inline-block; margin: auto; vertical-align: middle; height: 50%; >

説明: この方法では、test-margin-containerでheight: 100vh;を設定し、text-align: center;で横方向の中央寄せを行います。 test-margin-contentはdisplay: inline-block;に設定され、margin: auto;を使用して縦方向の中央寄せを実現します。

📎📎📎📎📎📎📎📎📎📎