css怎样让div在页面居中显示?

css怎样让div在页面居中显示?下面本篇文章给大家介绍一下css让一个div居于页面正中间的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

如何让一个div居于页面中间,我今天说的是让一个div水平居中同时垂直居中,而不是简单的top:50%,left:50%。当然,我们就按一开始的思路写一下:top,left属性都设为50%,看一下效果。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>div居于页面正中间</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            background-color: #EAEAEA;
        }
        div{
            width: 200px;
            height: 200px;
            background-color: #1E90FF;
        }
        .center-in-center{
            position: absolute;
            top: 50%;
            left: 50%;
        }
    </style>
</head>
<body>
    <div class="center-in-center"></div>
</body>
</html>

1.png

从我的截图可以看出,div的左顶点刚好在页面的中心点处。现在的思路是,如何移动div然后让div的中心和页面中心重合,即可达到我们一开始想要的结果。在这里我要介绍一种方法,使用css的transform属性。由于这个属性的值很多,我这里就不一一介绍,只是说一下它的translate。我们给刚才的center-in-center类加上translate(0,-50%)

.center-in-center{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(0, -50%);
}

2.png

如果使用过这个属性,应该知道怎么回事了。translate(0, -50%),第一个值是指水平移动量,和tansform的translateX效果一样,第二个值那就是垂直方向偏移量,但为负数时,代表反方向移动。现在我们只需tanslate(-50%,-50%)就可以达到div既水平居中同时垂直居中。

附上完整代码与效果:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>div居于页面正中间</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
            background-color: #EAEAEA;
        }
        div{
            width: 200px;
            height: 200px;
            background-color: #1E90FF;
        }
        .center-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>
</head>
<body>
    <div class="center-in-center"></div>
</body>
</html>

3.png

更多web前端自学知识,请查阅 HTML中文网 !!

以上就是css怎样让div在页面居中显示?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏