下面小编就为大家带来一篇如何让一个div居于页面正中间【实现方法】。小编觉得挺不错的,现在分享个大家,也给大家做个参考
如何让一个div居于页面中间,我今天说的是让一个div水平居中同时垂直居中,而不是简单的top:50%,left:50%。当然,我们就按一开始的思路写一下:top,left属性都设为50%,看一下效果。
JavaScript Code复制内容到剪贴板
- <!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%)
JavaScript Code复制内容到剪贴板
- .center-in-center{
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(0, -50%);
- }
如果使用过这个属性,应该知道怎么回事了。translate(0, -50%),第一个值是指水平移动量,和tansform的translateX效果一样,第二个值那就是垂直方向偏移量,但为负数时,代表反方向移动。现在我们只需tanslate(-50%,-50%)就可以达到div既水平居中同时垂直居中。
附上完整代码与效果:
JavaScript Code复制内容到剪贴板
- <!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居于页面中间,我今天说的是让一个div水平居中同时垂直居中,而不是简单的top:50%,left:50%。当然,我们就按一开始的思路写一下:top,left属性都设为50%,看一下效果。 JavaScript Code复制内容到...
div居于页面正中间 *{ margin: 0; padding: 0; background-color: #EAEAEA; } div{ width: 200px; height: 200px; background-color: #1E90FF; } .center-in-center{ position: absolute;
一、jQuery加载一个html页面到指定的div里 把a.html里面的某一部份的内容加载到b.html的一个div里。 比如:加载a.html里面的<div id=“row”></div>这个div里面的所有内容加载到b.html的这个div里<div id=”content...
vue 实现页面div盒子拖拽排序功能前言:目前市面上有很多实现拖拽排序功能的插件和方法,本节不过多累述,只讲一种:css3的transition-group方法 效果图: 1. DOM中使用: ...
网页div在屏幕正中间显示
将div固定在屏幕中间 将div固定在屏幕中间 将div固定在屏幕中间 将div固定在屏幕中间
我实现了多个div的动态添加,并且实现指定div的删除。 实现这个功能一些问题,添加多个div,它们id就可能会相同,这对我们无论后台还是前台处理都有麻烦的问题。所以我对id进行自增,然后就是要实现对指定div的删除...
因为需要,我现在要做一个网站原型出来,不连接数据库,但是也能在html页面实现增删改查的效果。先做个简单的jquery控制html页面增加和删除一个div的操作
jquery/js实现鼠标点击一个div,另一个div变色demo
一个使用css+div实现页面分区显示的html页面
用CSS+JQuery实现的div翻转效果
自己制作的DIV模态窗口,点击弹出DIV窗口,后层页面屏蔽,实现模态窗口。需要用vs2010打开
根据easyui布局原理,对于浏览器兼容,从ie6到ie9,谷歌、火狐、苹果浏览器都兼容
div实现圆角 div实现圆角 div实现圆角 div实现圆角 div实现圆角
DIV+CSS 实现选项卡DIV+CSS 实现选项卡DIV+CSS 实现选项卡DIV+CSS 实现选项卡
XHTML 40个例子显示的内容一样,通过CSS实现不一样的布局效果, 是学习div + css排版的绝佳教程.body标签内的内容如下: <div id="container"> <div id="header"><h1>Header</h1></div> <div id="wrapper"> <div id=...
CSS+DIV设计实例:实现让多个DIV排列时居中.txt
1、 响应式布局如何实现 2、三种方式实现一个 div 水平和垂直方向的居中 3、 数据类型判断 4、 rem 布局原理 5、 Arguments 6、 原型和原型链