CSSでWebページを基準にしてdivを中央に配置するように設定する方法

div を Web ページに対して中央に設定する Css メソッド: 1. div に絶対レイアウト「position:absolute;」を使用し、top、left、right、bottom の値を次のように設定します。等しい; 2. div に絶対レイアウトを使用し、上と左の値を「50%」に設定します; 3. CSS3 のtransform属性を通じてdivを中央に配置します。

このチュートリアルの動作環境: Windows 10 システム、CSS3 バージョン、DELL G3 コンピューター

div の設定方法CSSのWebページを基準にして中央に配置されますか?

css を使用して div を中央に配置します。

1. div には絶対レイアウト "position:absolute;" を使用します。

方法 1: div の場合は、絶対レイアウトの位置:absolute; を使用し、上、左、右、下の値が等しくなるように設定しますが、必ずしも 0 に等しいとは限りません; そして、margin:auto

{position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}

を設定します。 2. div に絶対レイアウトを使用し、top を配置し、left の値はすべて 50% に設定されます;

方法 2: この方法では、div の幅と高さを知っている必要があります。 div に絶対レイアウト位置:absolute を使用し、top と left の値を 50% に設定します。50% はページ ウィンドウの幅と高さの 50% を指します。最後に、div を左と上に移動します。 、左と上 サイズは、div

{position:absolute;
top:50%;
left:50%;
margin:-100px 0 0 -100px;
}

3 の幅と高さの半分です。div は、css3 のtransform属性によって中央に配置されます。

方法 3: div:Absolute の絶対位置を使用し、left と top の値を 50% に設定します。 CSS3 変換属性を使用します。変換:translate (-50%, -50%)

{position:abslolute;
top:50%;
left:50%;
transform：translate（-50%，-50%）；
-webket-transform:translate（-50%，-50%）;
-ms-transform:translate（-50%，-50%）;
-moz-transform:translate（-50%，-50%）;
}

2 つの div があり、内側の小さい div が外側の大きい div に対して水平方向、垂直方向、および中央に配置されている場合、いくつかの方法があります。

1. 実現するには、position と margin:auto を使用します。親要素は位置: 相対を設定し、子要素は位置: 絶対を設定し、上、左、右、下の値が等しくなるように設定します。

父元素{
position：relative；

}
子元素{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}

2. ポジションを使用します。親要素は位置: 相対を設定し、子要素は位置: 絶対を設定します。そして、上と左を 50% に設定し、左シフトと上シフトを子要素の半分のサイズに設定します

父元素{
position：relative；
}子元素
{position:absolute;
top:50%;
left:50%;
margin:-100px 0 0 -100px;
}

表示: フレックスを使用します。この方法にはブラウザの互換性設定が必要です。

{display:flex;
display:-webkit-flex;
justify-content:center;
-webkit-justify-content:center;
align-items:center;
-webkit-align-items:center;
margin:0 auto;
}

3. 変換:translate() を使用します。親要素は位置: 相対を設定し、子要素は位置: 絶対を設定します。そして上と左を50%に設定します。最後に変換を設定します:translate (-50%, -50%)

父元素{
position：relative；
}子元素
{{position:abslolute;
top:50%;
left:50%;
transform：translate（-50%，-50%）；
}

推奨学習: "css ビデオ チュートリアル "

以上がCSSでWebページを基準にしてdivを中央に配置するように設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。