CSS 在 DIV 中居中 H1 标签
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6254793/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Center a H1 tag inside a DIV
提问by VansFannel
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？
AlertDivwill be bigger than H1.
AlertDiv将大于 H1。
采纳答案by Marcel
You can add line-height:51pxto #AlertDiv h1if you know it's only ever going to be one line. Also add text-align:centerto #AlertDiv.
如果您知道它只会是一行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;
}
The demo below also uses negative margins to keep the #AlertDivcentered on both axis, even when the window is resized.
下面的演示还使用负边距来保持#AlertDiv两个轴的中心，即使窗口被调整大小。
Demo: jsfiddle.net/KaXY5
回答by Luke Puplett
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 divwas in a divin 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.
它大部分时间都有效。我确实遇到了一个问题，其中 adiv位于 adiv中li。列表项设置了高度，外部divs 由 3 列（基础）组成。第 2 和第 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 年甚至我的一些朋友经常使用互联网，我想知道是否有人认为居中将是一个有用的造型功能。只有我们吗？
回答by bluehallu
On the hX tag
在 hX 标签上
width: 100px;
margin-left: auto;
margin-right: auto;
回答by Nicu Surdu
You can use display: table-cellin order to render the div as a table cell and then use vertical-alignlike 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/
回答by Matthew Riches
<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:
您可以在此处尝试代码：
回答by kei
You could add padding to the h1:
您可以将填充添加到h1：
#AlertDiv h1 {
padding:15px 18px;
}
回答by pixelbobby
Started a jsFiddlehere.
在这里开始了一个jsFiddle。
It seems the horizontal alignmentworks with a text-align : center. Still trying to get the vertical align to work; might have to use absolutepositioning and something like top: 50%or a pre-calculated paddingfrom the top.
似乎水平对齐适用于text-align : center. 仍在尝试使垂直对齐工作；可能必须使用absolute定位和类似的东西top: 50%或padding从顶部预先计算。
