井井客

搜索

div始终垂直水平居中

position:fixed;可以让元素相对于body元素始终处于某个位置,实际中常用的是右下角/左下角的浮动广告,下面说的主要是如何让元素垂直水平居中,类似于运营网站经常会遇到的页面中间的咨询弹

div始终垂直水平居中

举例说明:如外面容器的尺寸宽高均为2000px,中间div元素的宽为340px,高为540px。

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>元素垂直水平居中</title>
<style type="text/css">
*html{background-image:url(about:blank);background-attachment:fixed;}/* 防IE6抖动的 */
.box{width:540px; height:340px; border:1px solid #000; position:fixed; left:50%; top:50%;margin-left:-270px;margin-top:-170px;_position:absolute;_top:expression(eval(document.documentElement.clientHeight/2+document.documentElement.scrollTop)); _left:expression(eval(document.documentElement.clientWidth/2+document.documentElement.scrollLeft)); background:#CF9;}
</style>
</head>
<body>
<div style="width:2000px; height:2000px;"></div>
<div class="box"></div>
</body>
</html>

稍微讲解一下,正常情况下让div始终垂直水平居中的核心在于让div元素中心点与body可视区域中间点保持一致,而单纯的让元素居于body左边50%的位置和顶部50%的位置,只是让div元素左上角与body中心点一致,与一开始的想法是背离的,所以这时候需要让元素再向左移一半宽、向上移一半高,即“margin-left:-270px;margin-top:-170px;”。而后面则因为Ie6不支持fixed,_position、_top、_left则是为了让IE6也能实现。

防IE6抖动的代码则是因为在IE6下面看浮动层的时候,会一顿一顿的,所以尽量也写上哈~

只要了解了让元素垂直水平居中的核心,你也可以轻轻松松制作咨询弹框~是不是很棒

文章TAG:CSS

作者:井井客整理来源:互联网
本文标题:div始终垂直水平居中
本文链接:http://www.jingjingke.com/c/2714.html

上一篇:html页面底部多出文字
下一篇:XHTML的四种声明

文章分类

相关阅读

随便看看