1

我在 SO 中检查了很多答案，最常见的解决方案是将displaydiv 设置为table-cellorinline-block并放置vertical-align: middle

因此，以下是我的 HTML 代码。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" type="text/css" href="css/ad.css" />
        <title>Ad</title>
    </head>
    <body>
        <div id="initial-div">
            Check out our amazing offer
        </div>
    </body>
</html>

CSS代码如下

body {
    overflow:hidden;
    height:100%;
    min-height: 100%;
    width: 100%;
    color: #ffffff;
    background-color:aliceblue;
}

#initial-div{
    position:absolute;
    top:0;
    bottom:0;
    right:0;
    left:0;
    color: #000;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    background-color: #ffd800;
}

但是，文本似乎并没有垂直居中。我在哪里错了？

4

1 回答 1

0

这会起作用：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" type="text/css" href="css/ad.css" />
        <title>Ad</title>
    </head>
    <body>
        <div id="initial-div">
            <div>Check out our amazing offer</div>
        </div>
    </body>
</html>


body {
    overflow:hidden;
    height:100%;
    min-height: 100%;
    width: 100%;
    color: #ffffff;
    background-color:aliceblue;
}

#initial-div{
    position:fixed;
    height: 100%;
    color: #000;
    background-color: #ffd800;
    width: 100%;
}
#initial-div div{
    text-align: center;
    position: relative;
    top: 50%;
    margin-top: -5px; /* height/2 */
}

http://jsfiddle.net/zpFym/

于 2013-06-20T05:14:50.690 回答