html5 居于页面中心,css笔记：如何让一个div居于页面正中间

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

div居于页面正中间

*{

margin: 0;

padding: 0;

background-color: #EAEAEA;

}

div{

width: 200px;

height: 200px;

background-color: #1E90FF;

}

.center-in-center{

position: absolute;

top: 50%;

left: 50%;

}

从我的截图可以看出，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既水平居中同时垂直居中。

附上完整代码与效果：

div居于页面正中间

*{

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%);

}

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

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

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

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

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

一个div居于另一个div底部

一个div如何与另一个div底部对齐,方法有很多,比如使用绝对定位 /p>

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

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

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

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

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

使一个div始终显示在页面中间 假设我们有一个div层:

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

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

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

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

一个切图仔的 CSS 笔记

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

随机推荐

FireBug使用总结

FireBug是一个用于网站前端的开发工具,它是Firefox浏览器的一个拓展插件,它可以调试JavaScript.查看DOM.分析CSS.监控网络流量以及进行Ajax交互等.提供了几乎前端开发需要的 ...

centos下安装xfce+vnc

首先安装桌面环境,我选择的是xfce,轻量级桌面,小巧实用不占太多内存,(占用内存方面,xfce少于kde,kde少于gnome). 安装xfce桌面一开始我以为第三方的软件源如rpmforge等应该 ...

Devexpress之barManager

隐藏菜单栏左边的竖线和右边的箭头? 1.隐藏菜单栏上右边的箭头属性设置:OptionsBar=>>AllowQuickCustomization=False 2.隐藏菜单栏左边的竖线属性设 ...

MobileProbe的使用

MobileProbe是CNZZ移动这块统计的一个产品,目前似乎分成了基础版和专业版.下载地址为: http://m.cnzz.com/?a=main&m=download&f=inf ...

CS窗体程序数据列表分页

以前,觉得winform程序分页很无趣,也没实际意义,直到近期的项目实践中让我认识到原来winform数据列表分页也是非常有必要的,因为由于数据量过大的情况,当窗体在初始加载数据的时候如果不做条件的限 ...

IIS7 配置 PHP5.6

环境: 操作系统:Win7 & 10 (x64) 中文专业版 PHP       :V5.6 首先添加IIS. 控制面板-〉程序-〉打开或关闭Windows功能 1. 勾选"Inte ...

QQ帐户的申请与登陆-(字符串操作)

题目: 实现QQ新帐户申请和老帐户登陆的简化版功能.最大挑战是:据说现在的QQ号码已经有10位数了. 输入格式: 输入首先给出一个正整数N(≤10^5),随后给出N行指令.每行指令的格式为:“命令符( ...

java泛型讲解

原文: https://blog.csdn.net/briblue/article/details/76736356 泛型,一个孤独的守门者. 大家可能会有疑问,我为什么叫做泛型是一个守门者.这其实是 ...

使用nmap查看web服务支持的http methods

安装nmap yum install nmap 查看web server支持的http methods u02 ~]$ nmap -p --script http-methods www.somewh ...