css – 将H1标记居中在DIV中

我在body标签中有以下DIV：

<div id="AlertDiv"><h1>Yes</h1></div>

这些是他们的CSS类：

#AlertDiv {
    position:absolute;
    height: 51px;
    left: 365px;
    top: 198px;
    width: 62px;
    background-color:black;
    color:white;
}

#AlertDiv h1{
    margin:auto;
    vertical-align:middle;
}

如何在DIV内部垂直和水平H1？

AlertDiv将大于H1。

解决方法

你可以添加line-height：51px到#AlertDiv h1，如果你知道它只会是一行。还要添加text-align：center到#AlertDiv。

#AlertDiv {
    top:198px;
    left:365px;
    width:62px;
    height:51px;
    color:white;
    position:absolute;
    text-align:center;
    background-color:black;
}

#AlertDiv h1 {
    margin:auto;
    line-height:51px;
    vertical-align:middle;
}

下面的演示还使用负边距来保持#AlertDiv在两个轴上居中，即使窗口已调整大小。

演示：jsfiddle.net/KaXY5