首页 > web前端 > html教程 > div+css 页面布局居中_html/css_WEB-ITnose

div+css 页面布局居中_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
发布: 2016-06-24 12:27:23
原创
1090 人浏览过

如果要实现整体页面上下居中,它们俩必须得是一个整体。我便在

标签中加了个class,使body中的两部分真正包含在一个整体中。接下来对这个整体进行设置:

 

.mainLayout {    position :absolute;    left : 50%;    top : 50%;    width : 910px;    margin-top : -270px;    margin-left : -455px;}
登录后复制

这是使用绝对定位和负margin值实现的。

left:50% 会让整个mainlayout容器从浏览器水平方向的中点开始往右显示,此时浏览器左边的一半是空的。

然后设置 margin-left为mainlayout容器的一半,设置为负值是让容器能再向左移动,也就是将整个容器从浏览器中点往左边挪动它(mainlayout容器)本身的一半。这样mainlayout容器刚好就能够左右居中显示了。

上下居中显示的原理一样:先top:50%让容器从垂直方向的中点向下显示,上面空出一半。然后再向上移动mainlayout容器的一半,使之垂直居中。

原文链接 : http://my.oschina.net/suyewanwan/blog/110784

相关标签:
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
Next.js 中的布局遮盖了页面内容
来自于 1970-01-01 08:00:00
0
0
0
css - H5页面flex布局怎么兼容华为
来自于 1970-01-01 08:00:00
0
0
0
css - Flex布局问题
来自于 1970-01-01 08:00:00
0
0
0
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板