YAOHAIXIAO.COM

HTML(5),CSS(3),JavaScript,DOM,Ajax,JSON,Front-end technologies & Yaohaixiao

热门标签:JavaScript Performance 前端开发 前端性能优化 原创

Rss

Home » Frontend » CSS » CSS 实用技巧 — 利用 Position 定位,让 DIV 元素在浏览器窗口居中

CSS 实用技巧 — 利用 Position 定位,让 DIV 元素在浏览器窗口居中

我们经常可以看到类似的 JavaScript 弹出层效果,JavaScript 模拟的弹出窗口可以正好做到在浏览器窗口的中心显示。那么这种效果是如何使用 CSS 来实现的呢?

CSS 实用技巧 -- 利用 Position 定位,让 DIV 元素在浏览器窗口居中

其实,实现这个效果并不复杂,利用 CSS 中的 position 定位就可以轻松搞定了。来看看代码吧:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Position 定位实现 DIV 在窗口居中</title>
<meta name="keywords" content="CSS Position 定位实现 DIV 在窗口居中,ccs,position,www.yaohaixiao.com" />
<meta name="description" content="CSS Position 定位实现 DIV 在窗口居中,ccs,position,www.yaohaixiao.com" />
<link href="http://www.yaohaixiao.com/css/golbal.css" rel="stylesheet" type="text/css" media="all" />
<link rel="shortcut icon" type="image/ico" href="/favicon.ico" />
<style type="text/css">
.dialog{
	position: fixed;
	_position:absolute;
	z-index:1;
	top: 50%;
	left: 50%;
	margin: -141px 0 0 -201px;
	width: 400px;
	height:280px;
	border:1px solid #CCC;
	line-height: 280px;
	text-align:center;
	font-size: 14px;
	background-color:#F4F4F4;
	overflow:hidden;
}	
</style>
</head>
<body>
<div class="dialog">我是在窗口正中央的,呵呵!</div>
</body>
</html>

演示地址:http://www.yaohaixiao.com/scripts/css-position-viewport-center.html

设置的技巧全部在这里:

.dialog{
	position: fixed;
	_position:absolute; /* hack for IE6 */
	z-index:1;
	top: 50%;
	left: 50%;
	margin: -141px 0 0 -201px;
	width: 400px;
	height:280px;
	border:1px solid #CCC;
	line-height: 280px;
	text-align:center;
	font-size: 14px;
	background-color:#F4F4F4;
	overflow:hidden;
}
  1. 设置 position: fixed; _position:absolute;
  2. 设置 left:50%top:50%;
  3. 设置 margin: -(DIV的offsetWidth/2) 0 0 -(DIV的offsetHeight/2)

只需要这样3步就做到了让 DIV 层居位于窗口的正中间了。只是在 IE6 浏览器中我们无法通过设置 position:fixed,来固定 DIV 层的位置,而必须另外使用 JavaScript 编程来动态定位 DIV 层的位置。

声明:本文采用BY-NC-SA协议进行授权。转载请注明转自:CSS 实用技巧 — 利用 Position 定位,让 DIV 元素在浏览器窗口居中

« »

6 条评论

  • ie6可以用那个表达式。qq空间的那些个做过测试,那个表达式对cpu的影响基本没有。所以可以用的。

    • 你说的是 CSS Expression,我没有具体的测试过,不过 CSS Expression 和用 JavaScript 编程处理固定位置的效果应该是一样的,而且性能问题相当的严重。个人建议还是尽量不要使用 CSS Expression。
      CSS Expression 相关的具体内容可以看看《CSS Expression

      • 之前在腾讯的ued博客里一篇关于qq空间的文章后问过这个问题,关于那个表达式的性能,因为qq空间也用了这个属性。然后小龙给我的回复是,他们做过测试过,对cpu没什么影响。也就是说性能上影响在范围内才用的。我觉得应该有一定的借鉴作用。

        • 腾讯有测试过,就可以用,不过固定位置之外,还想用 CSS Expression 还是自己测试一下的好,谨慎些好!

          IE6 是很头疼的问题,不过有用户量还是要想办法兼顾啊。没有办法!

  • 基本上 CSS Expression 个 JS 是一个效果,也不推荐使用 CSS Expression。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(Spamcheck Enabled)