在DIV中居中H1标签

I have the following DIV inside a body tag:

我在body标签中有以下DIV：

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

And these are their CSS classes:

这些是他们的CSS类：

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

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

How can I align vertically and horizontally H1 inside DIV?

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

AlertDiv will be bigger than H1.

AlertDiv将大于H1。

7 个解决方案

#1

You can add line-height:51px to #AlertDiv h1 if you know it's only ever going to be one line. Also add text-align:center to #AlertDiv.

你可以添加行高：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;
}

The demo below also uses negative margins to keep the #AlertDiv centered on both axis, even when the window is resized.

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

Demo: jsfiddle.net/KaXY5

演示：jsfiddle.net/KaXY5

#2

There is a new way using transforms. Apply this to the element to centre. It nudges down by half the container height and then 'corrects' by half the element height.

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

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

It works most of the time. I did have a problem where a div was in a div in a li. The list item had a height set and the outer divs made up 3 columns (Foundation). The 2nd and 3rd column divs contained images, and they centered just fine with this technique, however the heading in the first column needed a wrapping div with an explicit height set.

它大部分时间都有效。我确实有一个问题，一个div在一个div中的div。列表项具有高度设置，外部div组成3列（基础）。第二列和第三列div包含图像，并且它们以此技术为中心，但是第一列中的标题需要具有显式高度设置的包装div。

Now, does anyone know if the CSS people are working on a way to align stuff, like, easily? Seeing that its 2014 and even some of my friends are regularly using the internet, I wondered if anyone had considered that centering would be a useful styling feature yet. Just us then?

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

#3

On the hX tag

在hX标签上

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

#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>

You can try the code here:

你可以在这里试试代码：

http://htmledit.squarefree.com/

#5

Started a jsFiddle here.

在这里开始了一个jsFiddle。

It seems the horizontal alignment works with a text-align : center. Still trying to get the vertical align to work; might have to use absolute positioning and something like top: 50% or a pre-calculated padding from the top.

水平对齐似乎与text-align：center一起使用。仍然试图使垂直对齐工作;可能必须使用绝对定位和顶部：50％或从顶部预先计算的填充。

#6

You could add padding to the h1:

您可以在h1中添加填充：

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

#7

You can use display: table-cell in order to render the div as a table cell and then use vertical-align like you would do in a normal table cell.

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

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

You can try it here: http://jsfiddle.net/KaXY5/424/

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

#1