如何让一个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. oracle记录各登陆主机用户名,登陆ip,所执行的命令

    oracle记录各登陆主机用户名,登陆ip,所执行的命令 /etc/profile #history USER_IP=`>/dev/null| awk '{print $NF}'|sed -e ...

  2. 能上QQ无法打开网页

    能上QQ无法上网电脑故障解决方法 Winsock协议配置故障解决方法 第1步 :单击开始菜单中的运行,并在打开的运行窗口中键入“cmd”并回车确定,打死命令提示符窗口. 第2步 :在打开的命令提示符窗 ...

  3. zabbix学习入门总结

    对于zibbix,我现在的轮廓,是多个agent,一个server,再加上一些可选的proxy. 从通信的角度来看,就是数据流从agents流向server.但是agent跟server数据传送的细节 ...

  4. This function or variable may be unsafe. Consider using scanf_s instead.

    去掉安全检查,开头加上即可: #define _CRT_SECURE_NO_WARNINGS 或者: 严重性代码 说明项目文件行禁止显示状态 错误C4996 'scanf': This functio ...

  5. Android的Activity切换动画特效库SwitchLayout，视图切换动画库，媲美IOS

    由于看了IOS上面很多开发者开发的APP的视图界面切换动画体验非常好,这些都是IOS自带的,但是Android的Activity等视图切换动画并没有提供原生的,所以特此写了一个可以媲美IOS视图切换动 ...

  6. RDLC报表系列(二) 行分组

    接上一篇文章的内容,今天来说的是行分组.还是打开demo1.rdlc界面,拖入一个文本框和表 1.在表中随便选择一个字段,不然在添加行组的时候不会自动提示.我这里是选择的Dept 2.在下面的行组中右 ...

  7. C语言基础04

    什么叫数组呢?我们的第一反应是很多数组合在一起就是数组,字面意思,当然不仅仅是数字,字符也是可以的. 数组属于构造类型 .指相同类型的若干变量组织起来. 类型说明符 数组名 [常量表达式] int   ...

  8. Android05－UI02布局，自定义控件，ListView

    1.布局 布局的内部除了放置控件外,也可以放置布局,通过多层布局的嵌套,我们就能够完成一些 比较复杂的界面实现 ¨四种基本布局 LinearLayout RelativeLayout FrameLay ...

  9. 安卓linearlayout布局的一个嵌套实例

    XML代码如下 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:andr ...

  10. MRD-5012型RS232，RS485有源隔离中继模块,采用磁隔离技术，金升阳DC-DC隔离电源，纯硬件自适应方向，速度高达256000bps

    RS485\RS232磁隔离中继模块MRD-5012能够实现232转485或者485转485通信信号的电气隔离,同时提高驱动能力,能够在实现通信信号隔离并且延长通信距离,使485节点可以最大增加到25 ...