首頁  >  文章  >  web前端  >  html+css的垂直居中容器

html+css的垂直居中容器

php中世界最好的语言
php中世界最好的语言原創
2018-03-12 16:39:221491瀏覽

這次帶給大家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中文網其它相關文章!

相關閱讀:

在HTML中用CSS實作文字截斷

JS實作貝葉斯分類器

H5的Canvas如何實作繪製音樂環形頻譜圖

以上是html+css的垂直居中容器的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn