如何使一个div块在网页居中（正中间）

最新推荐文章于 2025-09-20 13:23:29 发布

原创最新推荐文章于 2025-09-20 13:23:29 发布 · 1w 阅读

51 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #css3

笔记专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一种使用CSS将DIV元素精确居中于页面的方法。通过设置特定的位置属性和转换属性，可以使DIV无论其尺寸如何都能在水平和垂直方向上居中。

一、首先在style中定义一个类，名字自己起

<style>
.div-in-center {
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
        }
</style>

说明一下：
1、top: 50%;left: 50%;代表可以让div块的左上顶点位于页面正中间
2、transform: translate(-50%, -50%);代表让div块向上向左分别偏移50%，这样刚好使得div块位于正中央。
3、-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
代表的是支持不同的浏览器，这个可以自行查阅。

二、引用这个类