CSS の絶対配置を中央に配置するにはどうすればよいですか? CSSの絶対位置決めとセンタリングの4つの実装方法

WebページにCSSを配置するときによく使われるのがCSS絶対配置です。では、CSS絶対配置でセンタリングを実現するにはどうすればよいでしょうか。今日の記事では、CSS で絶対配置と中央揃えを実装する方法を紹介します。

おすすめマニュアル: CSSオンラインマニュアル

CSSの絶対位置決めと中央揃えを実装するには、さまざまな方法があります。以下では、CSSの絶対位置決めと中央揃えの4つの方法を紹介します。

1. 互換性の高い主流の CSS 絶対配置と中央揃えの使用:

.conter{
    width: 600px; height: 400px;
    position: absolute; left: 50%; top: 50%;
    margin-top: -200px;    /* 高度的一半 */
    margin-left: -300px;    /* 宽度的一半 */
}

注: この方法には、要素のサイズを事前に知っておく必要があるという明らかな欠点があります。そうしないと、負のマージン値の調整が正確になりません。現時点では、JS を使用して取得する必要があることがよくあります。

2. css3 の登場により、マージンの代わりにトランスフォームを使用するという、CSS の絶対位置とセンタリングを実現できるようになりました。 :

.conter{
    width: 600px; height: 400px;
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);    /* 50%为自身尺寸的一半 */
}

3 、 margin:auto は絶対配置要素の中央揃えを実現します (上下左右の0位置配置; margin: auto)

.conter{
    width: 600px; height: 400px;
    position: absolute; left: 0; top: 0; right: 0; bottom: 0;
    margin: auto;    /* 有了这个就自动居中了 */
}

4. CSS3ボックスモデル: flexレイアウトを使用してCSS絶対配置を実現しますそしてセンタリング。この状況は、下位バージョンのブラウザに関係なく使用できます。

おすすめ関連記事:
1.CSSで絶対配置を行う方法
2.CSSでの相対配置と絶対配置の使い方と違いを説明した例(画像とテキスト)
3.Css絶対配置ポジショニング センタリング技術が優れています 欠点チャートの詳細な説明
関連ビデオの推奨:
1. CSS ビデオ チュートリアル - 翡翠少女般若心経編

ポジショニングの詳細については、この記事はここで終了します。 CSSマニュアル。

以上がCSS の絶対配置を中央に配置するにはどうすればよいですか? CSSの絶対位置決めとセンタリングの4つの実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。