HTMLでフレームを中央に配置する方法

HTML フレームを中央に配置するには 4 つの方法があります: margin: 0 auto;: フレームを水平方向に中央に配置します。 text-align: center;: フレームのコンテンツを水平方向に中央揃えにします。 display: flex; align-items: center;: フレームを垂直方向の中央に配置します。位置: 絶対; 上: 50%; 左: 50%; 変換: 変換(-50%, -50%);: CSS 変換を使用して、固定サイズのフレームのコンテナーの中央にフレームを配置します。

#HTML フレームを中央に配置する方法

HTML では、フレームを中央に配置する方法がいくつかあります。最も簡単な方法は、

margin: 0 auto; スタイルを使用することです。

<code class="html"><div style="margin: 0 auto; width: 500px;">
  内容
</div></code>

これにより、コンテナの幅に関係なく、フレームが水平方向に中央に配置されます。

もう 1 つの方法は、

text-align: center; スタイルを使用することです。これにより、フレーム全体ではなく、フレーム内のコンテンツが中央に配置されます。

<code class="html"><div style="text-align: center; width: 500px;">
  <p>内容</p>
</div></code>

垂直方向の中央揃えには、

display: flex; および align-items: center; を使用できます。スタイル。これにより、フレームが垂直方向の中央に配置されます。

<code class="html"><div style="display: flex; align-items: center;">
  <div style="width: 500px;">
    内容
  </div>
</div></code>

フレームの高さと幅が固定されている場合は、

position:Absolute;andtop:50% left: を使用することもできます。 50% ; 変換: 変換(-50%, -50%); スタイル。これは CSS 変換を使用してコンテナの中央に配置します。 rree

以上がHTMLでフレームを中央に配置する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。