ホームページ  >  記事  >  ウェブフロントエンド  >  html+cssの縦方向中央揃えコンテナ

html+cssの縦方向中央揃えコンテナ

php中世界最好的语言
php中世界最好的语言オリジナル
2018-03-12 16:39:221502ブラウズ

今回はhtml+cssの縦方向中央揃えのコンテナについてご紹介します。 html+cssの縦方向中央揃えのコンテナを使用する際の注意点は何ですか?実際の事例を見てみましょう。

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{            margin: 0;            padding: 0;
        }        .parent{            width: 400px;            height: 400px;            border:1px solid gray;            position: relative;
        }        .child{            width: 100px;            height: 100px;            top:0;            left:0;            right:0;            bottom:0;            margin:auto;            background: pink;            position: absolute;
        }    </style></head><body>
    <div class="parent">
        <div class="child"></div>
    </div></body></html>

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

関連記事:

CSSを使用してHTMLでテキストの切り詰めを実装する

JSを使用してベイジアン分類器を実装する

H5のCanvasで音楽リングスペクトログラムを描画する方法

以上がhtml+cssの縦方向中央揃えコンテナの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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