ホームページ > 記事 > ウェブフロントエンド > 幅と高さが固定されていない場合にCSSで中央揃えを実現する方法
幅と高さが固定されていない場合にCSSで中央揃えを実現する方法
- 藏色散人オリジナル
- 2020-12-17 10:09:012857ブラウズ
幅と高さが固定されていない CSS でセンタリングを実現する方法: 1. レイアウトに flex を使用してセンタリングを実現します; 2. CSS3 で変換を使用して要素をオフセットします; 3. table-cell を使用してセンタリングを実現します。
このチュートリアルの動作環境: 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 サイトの他の関連記事を参照してください。