ホームページ  >  記事  >  ウェブフロントエンド  >  幅と高さが固定されていない場合にCSSで中央揃えを実現する方法

幅と高さが固定されていない場合にCSSで中央揃えを実現する方法

藏色散人
藏色散人オリジナル
2020-12-17 10:09:012897ブラウズ

幅と高さが固定されていない CSS でセンタリングを実現する方法: 1. レイアウトに flex を使用してセンタリングを実現します; 2. CSS3 で変換を使用して要素をオフセットします; 3. table-cell を使用してセンタリングを実現します。

幅と高さが固定されていない場合にCSSで中央揃えを実現する方法

このチュートリアルの動作環境: Windows7 システム、CSS3 バージョンこの方法は、すべてのブランドのコンピューターに適しています。

推奨事項: "css ビデオ チュートリアル "

CSS の幅と高さが固定されていない場合に中央揃えを実現するにはどうすればよいですか?

方法 1: レイアウトに flex を使用する

誰もが最初に反応するのは flex かもしれません。記述方法がシンプルで直感的であり、互換性にも問題がないためです。携帯電話中心の第一候補です。

<div class="wrapper flex-center">
    <p>horizontal and vertical</p>
</div>
.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
}
.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

2 つの主要な属性 (justify-content と align-items) を使用して、どちらも center に設定して中央揃えを実現します。

唯一の子要素を中央に配置するには、ここでの flex-center を親要素に掛ける必要があることに注意してください。

方法 2: 位置変換を使用する

主に要素のオフセットに CSS3 の変換を使用します。効果は非常に優れています。

この方法は非常に強力で柔軟であり、次のことに限定されません。中央表示を実現します。互換性の観点から、IE も比較対象としていますが、2 番目の方法は IE8 以降で使用できます。 IE8以下では問題が発生します。

<body>
    <div id="box">
        <div id="content">div被其中的内容撑起宽高</div>
    </div>        
</body>
body,html { margin:0; width:100%; height:100%; }
#box { width:100%; height:100%; background:rgba(0,0,0,0.7); position:relative; }
#content{ position:absolute; background:pink; left:50%; top:50%;  
transform:translateX(-50%) translateY(-50%); 
-webkit-transform:translateX(-50%) translateY(-50%); }

方法 3: table-cell を使用する

テーブルのセルの中央揃え効果を使用して表示します。 flex と同様に、親要素に記述する必要があります。

rree

以上が幅と高さが固定されていない場合にCSSで中央揃えを実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事:CSS3パイの使い方次の記事:CSS3パイの使い方