让元素水平垂直居中的方法

最新推荐文章于 2025-04-26 17:19:11 发布

原创最新推荐文章于 2025-04-26 17:19:11 发布 · 299 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css

前端开发专栏收录该内容

18 篇文章

订阅专栏

1.绝对定位法

HTML:
<body>
    <div class="box"></div>
</body>

CSS:
<style>
.box{
    position:absolute;
    top:0;
    bottom: 0;
    left:0;
    right: 0;
    margin: auto;
    width:100px;
    height:100px;
    background:red;
    }
</style>

2.margin负值法

HTML:
<body>
    <div class="box"></div>
</body>

CSS:
<style>
.box{
    position:absolute;
    top:50%;
    left:50%;
    margin-left: -50px;
    margin-top:-50px;
    width:100px;
    height:100px;
    background:red;
    }
</style>