Skip to content

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

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

centering_a_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