失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > jsp文字上下居中显示_div+css:页面整体布局居中显示:上下居中||垂直居中 左右居中|

jsp文字上下居中显示_div+css:页面整体布局居中显示:上下居中||垂直居中 左右居中|

时间:2020-04-12 15:25:37

相关推荐

jsp文字上下居中显示_div+css:页面整体布局居中显示:上下居中||垂直居中 左右居中|

如何实现整体居中显示:

如果要实现整体页面上下居中,在

标签中加了个class, 然后对mainLayout进行设置:

.mainLayout {

position:absolute;

left:50%;

top:50%;

width:910px; /*你的实际页面的宽度*/

margin-top:-270px;

margin-left: -455px; /*455为整体width(这里是910)的一半*/

}

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

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

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

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

这样子的实现貌似兼容所有浏览器哦~(我自测了chrome ff ie7-10)

小结:

之前大概知道这个方法,但没有弄明白原理。今天碰到了这个任务,也终于看懂了,就索性废话一堆的记录下来,为那些和我一样糊里糊涂的孩子。(*^__^*)

jsp文字上下居中显示_div+css:页面整体布局居中显示:上下居中||垂直居中 左右居中||水平居中...

如果觉得《jsp文字上下居中显示_div+css:页面整体布局居中显示:上下居中||垂直居中 左右居中|》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。