在DIV中居中H1标签

Question

我在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大.

Answer 1

你可以添加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

Answer 2

有一种使用变换的新方法.将其应用于要居中的元素.它向下轻推容器高度的一半,然后"校正"元素高度的一半.

position: relative;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);

它大部分时间都有效.我确实有一个问题,其中div一个div在一个li.列表项具有高度设置,外部divs组成3列(基础).第二列和第三列div包含图像,并且它们使用这种技术很好地居中,但是第一列中的标题需要一个具有明确高度设置的包装div.

现在,有没有人知道CSS人员是否正在研究如何轻松地调整内容？看到2014年甚至我的一些朋友经常使用互联网,我想知道是否有人认为中心将是一个有用的造型功能.那么我们呢？

Answer 3

在hX标签上

width: 100px;
margin-left: auto;
margin-right: auto;