CSSを使用してdivを常に中央に配置するにはどうすればよいですか?

零下一度
リリース: 2017-05-12 13:59:40
オリジナル
2265 人が閲覧しました

画面がどのようにスライドしても、pは常に画面の中央に残ります(IE7(IE7を含む)以降をサポート)

以下に紹介する簡単なコードでこの機能を実現できますので、参考にしてください。

<p class="loginBox"></p>
ログイン後にコピー

CSS部分は次のように書く必要があります:

.loginBox {
    background: #FA2;
    width: 700px;
    height: 400px;
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 11;
    /*设定这个p的margin-top的负值为自身的高度的一半,margin-left的值也是自身的宽度的一半的负值.*/ 
    /*宽为400,那么margin-top为-200px*/ 
    /*高为200那么margin-left为-100px;*/ 
    margin: -200px 0 0 -350px;
}
ログイン後にコピー

書いてみると、意外と簡単だと思いませんか?

【関連おすすめ】

1.無料のCSSオンラインビデオチュートリアル

2.CSSオンラインマニュアル

3.php.cn Dugu Jiijian (2) - CSSビデオチュートリアル

以上がCSSを使用してdivを常に中央に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート