我有一些非常基础的HTML和CSS：
header {
vertical-align: middle;
height: 60px;
background-color: #00F;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" media="all" href="stylesheet.css">
<title>Hello, World!</title>
</head>
<body>
<header>
Hello<sup>World</sup>
</header>
</body>
</html>但是文本没有居中对齐。为什么呢？
vertical-align 属性仅适用于：
内联级别和 'table-cell' 元素
参见这个链接。
您可以使用line-height来垂直居中文本，只需将其设置为实际font-size的大小即可，但它仅在文本跨越单行时有效。
或者您可以通过相等的值在header元素的顶部和底部添加padding。
根据评论进行编辑：如果使用HTML5的header元素，则明显的解决方案是将其设置为display: table-cell;，而不是默认的块级元素，我认为重置CSS会应用。
Flexbox现在可以轻松实现这一点：
header {
display: flex;
align-items: center;
justify-content: center;;
}
display: table-cell; 更好的选择。 - Nilay Mehta我试过这个方法，对我来说效果非常好：
/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
/* W3C */
display:box;
box-pack:center;
box-align:center;
以下是我最喜欢的垂直对齐物品的技巧，它使用了弹性盒子（flex box），所有东西都应该使用弹性盒子！
header {
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
border: black solid 0.1rem;
height: 200px; <!--Insert any height -->
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" media="all" href="stylesheet.css">
<title>Hello, World!</title>
</head>
<body>
<header>
Hello<sup>World</sup>
</header>
</body>
</html>vertical-align 属性仅适用于行内元素，不会影响块级元素（例如 div 或段落）。如果您想使行内元素垂直居中，请使用此方法。
vertical-align: middle;
点击这里查看更多内容：理解垂直对齐，或者说“如何（不）使内容垂直居中”
vertical-align 在具有 display: block 属性的元素中并不起作用。如果文本是该元素中唯一的内容且全部在同一行上，则通常使用例如 line-height: 60px 的方法。
如果要放入更多内容，则最好给容器设置高度（如果必须）并调整包含元素内部的边距/填充等，直到看起来合适。
div 并且垂直居中该 div，因为 div 不是内联元素，对吧？有什么好的解决方法（抱歉问这种愚蠢的问题，我对 HTML/CSS 非常陌生）。 - ryyst如果您不想使用表格，可以使用vertical-align:middle和display:inline-block，同时使用一个高度为100%的空内联元素：
<!DOCTYPE><html><body> <!-- Author: brillout.com -->
<div style='height: 300px;border: 1px solid black;text-align:center'>
<div class='i'>vertical-align + inline-block<br>trick<br>in action</div>
<div class='i' style='height:100%;width:0px'></div>
</div>
<style> div.i{ display: inline-block; vertical-align: middle } </style>
</body></html>
<div style="border:1px solid #000;height:200px;position: relative;">
<div style="position: absolute;top: 50%;left:50%;">
hello mahesh
</div>
</div>
试试这个。
header本身，您所描述的情况实际上需要更多的 div/元素来包含导航、搜索等等... 然而，我的答案中已经给出了提示，即将 header 设为display: table-cell;。 - clairesuzydisplay-table; width:100％，或者如果您有一个“wrapper” div，在那里进行操作，使容器元素display:table不会对事情产生不利影响，实际上它可能会有像全长列这样的好处，但YMMV。 - clairesuzy