ホームページ >ウェブフロントエンド >htmlチュートリアル >要素を垂直方向と水平方向の中央に配置する 3 つの方法

要素を垂直方向と水平方向の中央に配置する 3 つの方法

PHP中文网
PHP中文网オリジナル
2017-04-01 17:04:281516ブラウズ

最初の方法:

p.box{
weight:200px;
height:400px;
position:absolute;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-200px;
}

*優れた互換性; 欠点: 要素の幅と高さを知っている必要があります

-------------

メソッド メソッド:

p.box{
weight:200px;
height:400px;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}

*これは css3 のスタイルです。 欠点: 互換性が低く、IE9 以降のブラウザーのみをサポートします

---------------

3 番目メソッド

p.box{
weight:200px;
height:400px;
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
}

*互換性が優れていますが、欠点: IE7 未満のブラウザはサポートされていません

上記は、要素を垂直方向と水平方向に中央揃えにする 3 つのメソッドの内容です。その他の関連コンテンツにご注意ください。 www.php.cn)!


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