ホームページ > ウェブフロントエンド > htmlチュートリアル > HTMLでフレームを中央に配置する方法

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

下次还敢
リリース: 2024-04-22 10:45:30
オリジナル
840 人が閲覧しました

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

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

#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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート