position:absolute下,top:0,right:0,bottom:0,left:0 結合margin:auto的作用(讓明確寬高的盒子水平垂直居中於父元素)

絕對定位 + margin,讓明確寬高的盒子水平垂直居中於窗口

<!DOCTYPE>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0" >
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <style>
            /* 讓明確寬高的盒子垂直水平居中於父元素 */
            .wangyi-loading{
                width: 360px;
                height: 360px;
                margin:auto;
                position: absolute;
                top:0;
                right:0;
                bottom:0;
                left:0;
                border:5px solid red;
            }
        </style>
    </head>
    <body>
        <div class="wangyi-loading">

        </div>
    </body>
</html>

在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章