盒子垂直居中

最新推荐文章于 2023-11-03 10:33:06 发布

原创最新推荐文章于 2023-11-03 10:33:06 发布 · 579 阅读

0 ·

CC 4.0 BY-SA版权

html+css 专栏收录该内容

25 篇文章

订阅专栏

本文介绍了一种利用CSS实现网页元素垂直居中的方法。通过设置绝对定位与自适应margin值，使一个200x200像素的盒子能够在浏览器窗口中水平及垂直方向上居中显示。

在线展示
这里写图片描述

让一个盒子在页面中垂直居中显示。

html:

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

css:

<style>
    * {
        padding: 0;
        margin: 0;
    }

    .box {
        width: 200px;
        height: 200px;
        background-color: pink;
        margin: 0 auto;/*左右居中*/
        /*上下居中*/
        position: absolute;/*定位*/
        left: 50%;/*整个屏幕宽度的一半*/
        top: 50%;/*整个屏幕高度的一半*/
        margin-top: -100px;/*盒子高度的一半即（200/2）*/
        margin-left: -100px;/*盒子宽度的一半即（200/2）*/          
    }
</style>