HTML5/CSS3基础——div盒子水平垂直居中的三种方案

最新推荐文章于 2025-06-06 22:51:36 发布

WH小可爱

最新推荐文章于 2025-06-06 22:51:36 发布

阅读量4.5k

点赞数 3

CC 4.0 BY-SA版权

文章标签： css html

本文链接：https://blog.csdn.net/weixin_43633329/article/details/114377648

本文详细介绍了使用CSS定位、Flex布局和JavaScript实现div盒子水平垂直居中的三种方法，包括各自的注意事项和适用场景。通过实例解析，帮助开发者更好地理解和应用这些技巧。

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

HTML5/CSS3基础——div盒子水平垂直居中的三种方案

如何使盒子水平垂直居中，是我们在写页面布局经常能遇到的问题之一。以前我的我每次需要用到水平垂直居中的时候都会百度，每次百度总是又能找到不同的方式而且还记不住:( 但今天就写系统的总结和整理了一下我们使div盒子水平垂直居中的方式到底有哪些跟我之前有着一样困惑的小伙伴一起来看吧～～

我们的html是这样滴：

<body>
<div class="box" id="box">水平垂直居中方案</div>
</body>

一、基于定位的使div盒子水平居中的三种方式

1、使用top:50% left:50% 以及margin-top 和 margin-left 来进行定位

注意： 必须知道盒子的具体的宽和高，否则无法计算margin的值

.box{
   
   
        /* 盒子长为200，宽为100 背景为海蓝色*/
        height:100px;
        width:200px;
        background-color: aquamarine;
        position: absolute; /* 注意这是指盒子的左顶点在页面的中心 */
        top:50%;
        left:50%; 
        margin-top