div+css 页面布局居中

最新推荐文章于 2021-10-14 14:04:37 发布

Just do it

最新推荐文章于 2021-10-14 14:04:37 发布

阅读量101

点赞数

原文链接：http://www.cnblogs.com/sktl4455/p/3481534.html

版权

如果要实现整体页面上下居中，它们俩必须得是一个整体。我便在<body>标签中加了个class，使body中的两部分真正包含在一个整体中。接下来对这个整体<body class="mainLayout">进行设置：

.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容器的一半，使之垂直居中。

转载于:https://www.cnblogs.com/sktl4455/p/3481534.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

关注关注