如何用CSS让一个div全屏居中

居中是一个能有效获取用户注意的排版方式。尤其是你有一个大大的提示想告诉用户的时候。 div居中有点难度,水平一般没问题,垂直,也就是全屏居中就有点技巧了。这里翻译了一篇办法:

展示的是旧版本的剧种方法,图示很清楚。稍微改进下代码如下:
<!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> <title>Centered DIV Test</title>
.centered_div{
width:500px;
height:200px;
position:absolute;
top:50%; left:50%;
margin-left:-250px;
margin-top:-100px;
background:red;
}
</head>
<body>
centered div content
</body>
</html>
在线例子可以看这里。 原文:The simplest way to horizontally and vertically center a DIV