如何让一个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去解决咯！又快到周末了，又可以好好睡觉了，真好！

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

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

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

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

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

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

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

  4. TouTiao开源项目 分析笔记9 实现一个问答主页面

    1.根据API返回创建几个基础的Bean 1.1.WendaArticleDataBean类 API返回的数据如下: /** * cell_type : 36 * extra : {"wen ...

  5. 12小时包你学会基于ReactMix框架的ReactNativeApp开发（二）基于Css+HTML写第一个app页面

    上一篇文章,大家对于ReactMix(https://github.com/xueduany/react-mix)框架有了一个基本认识,知道我们是一个语法糖,帮助大家基于一套代码,所有平台都能跑.那么 ...

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

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

  7. DIV+CSS布局问题：一个宽度不确定的DIV里面放三个水平对齐的DIV，左右两个DIV宽度固定为150px，中间那个DIV充满剩余的宽度

    一个入门的DIV+CSS布局问题:一个宽度不确定的DIV里面放三个水平对齐的DIV,左右两个DIV宽度固定为150px,中间那个DIV充满剩余的宽度. 说明:代码非真实情况下使用,所以直接简单. 没耐 ...

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

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

  9. 一个切图仔的 CSS 笔记

    1,flexbox~注意,设为 Flex 布局以后,子元素的float.clear和vertical-align属性将失效. 在ios8上要加上前缀 display: -webkit-box; dis ...

随机推荐

  1. http 中get和post

    1. http://www.cnblogs.com/hyddd/archive/2009/03/31/1426026.html 浅谈HTTP中Get与Post的区别 2009-03-31 14:51 ...

  2. poj 3641 Pseudoprime numbers（快速幂）

    Description Fermat's theorem states that for any prime number p and for any integer a > 1, ap = a ...

  3. Windows下安装Python3.4.2

    一.Windows下安装Python3.4.2 1.下载Windows下的Python3.4.2.exe 2.指定一个目录安装,然后下一步 3.配置环境变量包括Python.exe的文件.目录如下图所 ...

  4. 素数回文（dfs，有bug）

    素数回文 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submi ...

  5. Cassandra监控 - OpsCenter手册

    注:本文转自:http://eric100.blog.51cto.com/2535573/1717792 Opscenter用户手册 1.       OpsCenter简介 DataStaxOpsC ...

  6. win7充分利用cpu来提供计算机性能

    在任务栏左下角点击开始菜单,在运行框内输入msconfig,在弹出的窗口点击“高级选项”,接着会弹出一个新窗口,我们勾选“处理器数”,在下拉菜单中按照自己的电脑配置进行选择,现在双核比较常见,当然也有 ...

  7. 《think in python》学习-8

    字符串 字符串是一个序列,可以用方括号操作符来访问字符串中的单独字符 fruit = 'banana' letter = fruit[1] 方括号中的表达式称为下标 下标从0 开始 任何表达式,包括变 ...

  8. 缓存 Array.length 是老生常谈的小优化

    问题 缓存 Array.length 是老生常谈的小优化. // 不缓存 for (var i = 0; i < arr.length; i++) { ... } // 缓存 var len = ...

  9. JQuery EasyUi 扩展combox验证

    随笔记录一下 1.通过select text的值验证 /** * 扩展combox验证,easyui原始只验证select text的值,不支持value验证() */ (function($){ c ...

  10. 蜗牛爱课－ CGAffineTransformMakeRotation 实现一张图片的自动旋转

    self.locationTimer =[NSTimer scheduledTimerWithTimeInterval: 0.01 target: self selector:@selector(tr ...