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 ...
html5 居于页面中心,css笔记:如何让一个div居于页面正中间相关推荐
- 在一个请求分页系统中,分别采用 FIFO、LRU和 OPT页面置换算法时,假如一个作业的页面走向为 4、3、2、1、4、3、5、4、3、2、1、5,当分配给该作业的物理块数M分别为 3、4时,
页面置换算法 题目: 在一个请求分页系统中,分别采用 FIFO.LRU和 OPT页面置换算法时,假如一个作业的页面走向为 4.3.2.1.4.3.5.4.3.2.1.5,当分配给该作业的物理块数M分别 ...
- freemarker自动生成html页面,HTML+CSS入门 Freemarker如何生成HTML静态页面
本篇教程介绍了HTML+CSS入门 Freemarker如何生成HTML静态页面,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 做一个网址导航的项目,面向用户的就是一个首 ...
- 只用html5与CSS做一个简单的页面,HTML+CSS基础训练之做一个简单页面的布局
下面进入正题:布局是网页设计的基础中的基础,一个好的布局可以让人一目了然,一个失败的布局会让协同人员抓狂.所以前端开发,从布局开始. 首先分析一下图片的布局 ,分析各个色块之间的嵌套关系 如图所示:红 ...
- TouTiao开源项目 分析笔记9 实现一个问答主页面
1.根据API返回创建几个基础的Bean 1.1.WendaArticleDataBean类 API返回的数据如下: /*** cell_type : 36* extra : {"wenda ...
- html5边框有圆弧,CSS圆角有立体感的DIV边框
圆角边框 #sash_left { width:430px; float:left; } #sash_left ul { text-align:left; vertical-align:middle; ...
- HTML下拉菜单为什么无线拉长,【CSS】怎么拉长一个div的高度
请看技巧与提示的那里,由于文字不是很多,导致在大屏幕上,这个div太短了,现在页面有点难看,但是在比较小的屏幕(笔记本屏幕),效果还是可以的,这个该怎么决解呢? 我希望的效果如下 回答: $(&quo ...
- asp.net 的page 基类页面 做一些判断 可以定义一个基类页面 继承Page类 然后重写OnPreLoad事件...
public class BasePage:Page protected override void OnPreLoad(EventArgs e) { base.OnPreLoad(e); ...
- html中怎么设置input的背景颜色,css里我们选中一个div里的一个input设置背景色
new_object_ 楼主问的是静态的设置背景色还是选中了input后变色?如果是保持颜色则如楼上所述,通过选择器设置input的css样式即可:div input { background-col ...
- html中如何把一个div放到页面底部,html – 如何将DIV锚定到页面的底部?
看到css-tricks: CSS: #footer { position:fixed; left:0px; bottom:0px; height:30px; width:100%; backgrou ...
最新文章
- 6月Python热文Top10,精选自1000篇文章
- MySQL安装查看密码修改密码
- 收藏 | 12个ggplot2拓展程序助你强化R可视化
- 面向对象课程第二单元作业总结
- 阿里数据中台系列之Apsara Stack控制台初始化配置及资源管理(二)
- 可用于在 Microsoft.NET Framework 4.0 中的 ASP.NET 浏览器定义文件的修补程序
- LeetCode 第 17 场双周赛(469/897,前52.3%)
- hive - 自定义函数(超详细步骤,手把手的交)
- 理论基础 —— 索引 —— B 树、B+ 树与 B* 树
- 【ElasticSearch】Es 源码之 PersistedClusterStateService 源码解读
- OpenShift 4.5 新特性 - 创建任务和定时任务
- Eclipse如何新建TOMCAT并配置Server Locations和Publishing属性
- php如何获取html的值,请教同一个文件中php如何获取html的变量值?
- 解压软件安装包,winrar
- IT男的魔都10年及N次面试 - 如何在500强升职顺便搞定漂亮MM
- mysql如何设置host_如何快速修改MySQL用户的host属性
- 利盟Lexmark CX317 打印机驱动
- oracle发生20001,Oracle IMP数据时报20001错误
- linux 显卡 卡死,linux服务器显卡崩溃解决方案
- 数据泄露,数据防泄密该怎么做?
热门文章
- 解决input[type=file]打开时慢、卡顿问题
- docker pull下载镜像时的报错及其解决方法
- vue2打包时内存溢出解决方案
- 解决idea导入项目后依赖报错问题
- Servlet自动注入Spring容器中的Bean解决方法
- 如何在JavaScript / jQuery中查找数组是否包含特定字符串? [重复]
- 您最喜欢的C#扩展方法是什么? (codeplex.com/extensionoverflow)
- 如何在ImageView中缩放图像以保持纵横比
- elasticsearch使用指南之Elasticsearch Document Index API详解、原理与示例
- 免费超高速卡片式病人基本信息列表控件