position:absolute下，top:0,right:0,bottom:0,left:0 结合margin:auto的作用（让明确宽高的盒子水平垂直居中于父元素）

最新推荐文章于 2023-10-21 09:42:12 发布

ddx2019

最新推荐文章于 2023-10-21 09:42:12 发布

阅读量5.3k

点赞数 2

分类专栏： HTML+CSS+JS 所遇问题，小记文章标签：绝对定位盒子水平垂直居中 css

本文链接：https://blog.csdn.net/ddx2019/article/details/106839442

版权

所遇问题，小记同时被 2 个专栏收录

74 篇文章 2 订阅

订阅专栏

HTML+CSS+JS

16 篇文章 1 订阅

订阅专栏

绝对定位 + 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>

在这里插入图片描述

ddx2019

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
3
评论
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="
复制链接

扫一扫