如何让一个div居于页面正中间

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

<!DOCTYPE html>

<html lang="en">

<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>

从我的截图可以看出，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%);

}

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

附上完整代码与效果

<!DOCTYPE html>

<html lang="en">

<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>

说多两句，这也可以是一道非常不错的面试题，大家可以留意一下。当然还有其他解法，这里就不再班门弄斧了。另外，css3的transform是一个非常强大的属性，可以做很多变换3d之类的炫酷效果，如果有兴趣可以深入研究一下。但前端有一个不得不说的痛，浏览器兼容性问题。。。其他的浏览器还好说，万恶的IE，IE9支持一小部分属性，IE9以下全部不支持。如果还深爱着IE，那只能另辟蹊径，甚至不惜用js去解决咯！

如何让一个div居于页面正中间的更多相关文章

  1. css笔记：如何让一个div居于页面正中间

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

  2. 利用css来让一个div在页面中垂直居中的方法

    一.如何让一个div在页面中垂直居中(请至少列出三种) 1.距离页面窗口左边框和上边框的距离设置为50%,这个50%就是指页面窗口的宽度和高度的50%,最后将该DIV分别左移和上移,左移和上移的大小就 ...

  3. 一个div居于另一个div底部

    一个div如何与另一个div底部对齐,方法有很多,比如使用绝对定位 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/ ...

  4. 使一个div始终显示在页面中间

    使一个div始终显示在页面中间 假设我们有一个div层:<div id=”myDiv”></div> 首先,我们用css来控制它在水平上始终居中,那么我们的css代码应该是这样 ...

  5. 设置一个div网页滚动时，使其固定在头部，当页面滚动到距离头部300px时，隐藏该div，另一个div在底部，此时显示；当页面滚动到起始位置时，头部div出现，底部div隐藏

    设置一个div网页滚动时,使其固定在头部,当页面滚动到距离头部300px时,隐藏该div,另一个div在底部,此时显示: 当页面滚动到起始位置时,头部div出现,底部div隐藏 前端代码: <! ...

  6. 使用yii的layout，加入<?php echo $content; ?>这句话时，它会自动在子页面上面添加一个div包裹

    使用yii的layout,加入<?php echo $content; ?>这句话时,它会自动在子页面上面添加一个div包裹,而且div的id命名为id=content,这个和已有id重复 ...

  7. 如何使一个div能够铺满整个页面？ && 模态框的制作 && outerHTML

    说明: 使用 ele.outerHTML = '' 这样的方法可以很容易的清除一个元素. 当然也可以使用parent.removeChild() ,但是相较而言,还是使用 outerHTML = '' ...

  8. THINKPHP_(7)_THINKPHP6的controller模型接收前端页面通过ajax返回的数据，会因为一个div而失败

    这个随笔比较短. 同样的前端页面代码,修改了一下,后端模型接收不到数据. 利用beyond compare软件比对两个前端文件, 发现多了一个</div>标签. 多了一个</div& ...

  9. 后一个div无法遮挡住前一个有img的div

    这个标题实在是我无奈之下才取出来的,毕竟我文采有限~ 今天我遇到的一个eggpain的问题: 前提:当页面上有两个没有background的div,大小一样,绝对定位在同一个地方(让第二个遮挡住第一个 ...

随机推荐

  1. Ubuntu14.04下redis安装 配置， redis主从配置

    1.到官网下载redis源码包 wget http://download.redis.io/releases/redis-3.2.8.tar.gz 2.解压 并 编译 .tar.gz cd redis ...

  2. Qt的QPixmap半透明

    QPixmap pix1(":/PixmapTest/Resources/Chrysanthemum.jpg"); QPixmap temp(pix1.size()); temp. ...

  3. （转）一个故事讲完https

    (转)一个故事讲完https 2 1  序言 今天来聊一聊https 安全传输的原理. 在开始之前,我们来虚构两个人物, 一个是位于中国的张大胖(怎么又是你?!), 还有一个是位于米国的Bill (怎 ...

  4. Canvas vs. SVG[转]

    Canvas 和 SVG 都允许您在浏览器中创建图形,但是它们在根本上是不同的. SVG SVG 是一种使用 XML 描述 2D 图形的语言. SVG 基于 XML,这意味着 SVG DOM 中的每个 ...

  5. Materialize——扁平化卡片式网页模板

    Materialize 官网:http://www.materialscss.com/ 下载 http://pan.baidu.com/s/1kUUX2Vt CSS 颜色 背景色 <div cl ...

  6. Oracle数据表转换为Shapefile（一）

    严格来说,文章标题中的“转换”并不完全合适.本文的主要内容是基于Oracle数据表的数据来生产出Shapefile文件.进行该工作的一个前提条件是:Oracle数据表中包含坐标数值字段,一般来说就是x ...

  7. VS2013启动越来越慢

    Q.VS2013 原来启动只要大概 一两秒的时间,现在启动最少也得十秒以上.而且打开项目也变得很慢了!求解决方案. A.清理一下缓存就好了. VS2010清理缓存:第一:启用vs2010命令行工具:在 ...

  8. Word页面去除下划线(Office 2017)实现

    后面就不用说了吧设置边框无

  9. zookeeper 开机启动

    第一种:直接修改/etc/rc.d/rc.local文件 在/etc/rc.d/rc.local文件中需要输入两行,其中export JAVA_HOME=/usr/java/jdk1.8.0_112是 ...

  10. 《Beginning Java 7》 - 4 - finalize() 手动垃圾回收

    当我们想在系统进行垃圾回收时做一些特定的工作,我们就可以重写 finalze() 函数,因为 Object 的 此函数是空的. 比如: protected void finalize() throws ...