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的{{1}}的问题。列表项具有高度设置，外部li组成3列（基础）。第2和第3列div包含图像，它们使用这种技术很好地居中，但是第一列中的标题需要一个具有明确高度设置的包装div。

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

Answer 3

在hX标签上

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

Answer 4

<div id="AlertDiv" style="width:600px;height:400px;border:SOLID 1px;">
    <h1 style="width:100%;height:10%;text-align:center;position:relative;top:40%;">Yes</h1>
</div>

您可以在此处尝试代码：

http://htmledit.squarefree.com/

Answer 5

您可以为h1添加填充：

#AlertDiv h1 {
  padding:15px 18px;
}

Answer 6

开始 jsFiddle here。

似乎水平对齐与text-align : center一起使用。仍然试图使垂直对齐工作;可能必须使用absolute定位，例如top: 50%或从顶部预先计算的padding。

Answer 7

您可以使用display: table-cell将div渲染为表格单元格，然后像在普通表格单元格中一样使用vertical-align。

#AlertDiv {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

你可以在这里试试： http://jsfiddle.net/KaXY5/424/

在DIV中居中H1标签

7 个答案: