盒子垂直居中

erdouzhang

于 2017-03-22 11:44:34 发布

阅读量559

点赞数

CC 4.0 BY-SA版权

分类专栏： html+css

本文链接：https://blog.youkuaiyun.com/erdouzhang/article/details/64906860

html+css 专栏收录该内容

25 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在线展示
这里写图片描述

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

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>