Html 如何在 div 中垂直居中 H1？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20562860/
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
How do I vertically center an H1 in a div?
提问by Edward Touw
First of all, my apologies. I know there are various solutions posted for this issue here, but for the life of me I can't get any of them to work.
首先，我很抱歉。我知道这里发布了针对此问题的各种解决方案，但在我的一生中，我无法让其中任何一个发挥作用。
For a responsive website I'm trying to center an h1 in a div.
对于响应式网站，我试图将 h1 居中放置在 div 中。
Centering horizontally is not an issue, but I'm having problems getting it centered vertically. Presumably I'm doing something wrong or misunderstanding the explanations I found here (or maybe both).
水平居中不是问题，但我在垂直居中时遇到问题。大概我做错了什么或误解了我在这里找到的解释（或者两者都有）。
So as I'm probably interpreting earlier solutions given the wrong way, could someone please explain what exactly I have to add to the code beneath to get the h1 to center vertically?
因此，由于我可能以错误的方式解释了早期的解决方案，有人可以解释一下我必须在下面的代码中添加什么才能使 h1 垂直居中吗？
(To make this question relevant to as much people as possible, I've already stripped the code of all my previous attempts to do so myself.)
（为了使这个问题与尽可能多的人相关，我已经剥离了我自己以前尝试这样做的所有代码。）
CSS:
CSS：
html, body {
height: 100%;
margin: 0;
}
#section1 {
min-height: 90%;
text-align:center
}
HTML:
HTML：
<div class="section" id="section1">
<h1>Lorem ipsum</h1>
</div>
回答by Pete
you can achieve vertical aligning with display:table-cell:
您可以通过以下方式实现垂直对齐display:table-cell：
#section1 {
height: 90%;
text-align:center;
display:table;
width:100%;
}
#section1 h1 {display:table-cell; vertical-align:middle}
Update - CSS3
更新 - CSS3
For an alternate way to vertical align, you can use the following css 3 which should be supported in all the latest browsers:
对于垂直对齐的替代方法，您可以使用以下所有最新浏览器都应支持的 css 3：
#section1 {
height: 90%;
width:100%;
display:flex;
align-items: center;
justify-content: center;
}
回答by melancia
You can achieve this with the displayproperty:
您可以通过以下display属性实现此目的：
html, body {
height:100%;
margin:0;
padding:0;
}
#section1 {
width:100%; /*full width*/
min-height:90%;
text-align:center;
display:table; /*acts like a table*/
}
h1{
margin:0;
padding:0;
vertical-align:middle; /*middle centred*/
display:table-cell; /*acts like a table cell*/
}
回答by benadamstyles
I've had success putting text within span tags and then setting vertical-align: middle on that span. Don't know how cross-browser compliant this is though, I've only tested it in webkit browsers.
我已经成功地将文本放入跨度标签中，然后在该跨度上设置垂直对齐：中间。不知道这是如何跨浏览器兼容的，我只在 webkit 浏览器中测试过它。
回答by Amarnath Balasubramanian
回答by smoore4
This is the jQuery method. Looks like overkill but it calculates the offset.
这是 jQuery 方法。看起来有点矫枉过正，但它计算了偏移量。
<html>
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="https://raw.github.com/dreamerslab/jquery.center/master/jquery.center.js"></script>
<script type="text/javascript">
$(function(){
$('#jquery-center').center();
});
</script>
</head>
<body>
<div id="jquery-center" style="position:absolute;">
<h1>foo</h1>
</div>
</body>
</html>
回答by Carloscar Tovar
Just use padding top and bottom, it will automatically center the content vertically.
只需使用填充顶部和底部，它会自动垂直居中内容。
