Question

我的html看起来像这样：

<!DOCTYPE html> 
<head>
    <meta charset="utf-8">

    <!--[if lte IE 8]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head> 

<body>

<header>
  <h1>Some title thing, who knows</h1>
  <nav>
    <ul>
      <li><a href="one/">One</a></li>
      <li><a href="two/">Two</a></li>
      <li><a href="three/">Three</a></li>
    </ul>
  </nav>
</header>

</body>
</html>

如果我给header一个自动边距和一个宽度，它会水平居中。什么是确保它垂直居中的最不可怕的方法呢？

我知道以下文章提供了对该主题的一些讨论：

Answer 1

由于此问题被标记为CSS3，因此这是使用CSS3的“flexbox”的“最不可怕”的解决方案。不幸的是，只有Safari，Chrome和Firefox的最新版本支持它。

html, body {
  margin:0;
  padding:0;
  height:100%;
  background:#eee;
}
header {
  width:30em;
  background:#fff;
}
body {  
  display:box;
  box-pack:center;
  box-align:center;
  box-orient:horizontal;
}

更完整的演示can be found here。

Answer 2

如果你不知道我经常使用的唯一方式header的高度，如果做得好，需要额外的HTML，你可以做到很难。

通过将标题设为vertical-align: middle

来制作标题table-cell

html{
    height: 100%;
}      
body {
    display: table;
    height: 100%;
    margin: 0 auto;
    padding: 0;
}
header {
    display: table-cell;
    vertical-align: middle;
}

请注意，我在html节点上设置了100％的高度，据我所知，它实际上不是正确的css，它应该在主体上，标题应该在封装div中display: table {{3 }}

Answer 3

不幸的是，仍然没有优雅的垂直对齐，只有黑客。

Answer 4

我不知道是否有最好的方法，但有许多不同的方法（取决于你的情况），并且很多都经过深入讨论in this article。

Answer 5

通常当我需要垂直居中时，我使用一对内联块元素。您有一个元素是容器的整个高度，第二个元素只是要居中的内容的高度。两者都是display:inline-block;vertical-align:middle。

我喜欢使用b标签，因为它们没有语义意义而且很小：

<style>
    .mycontainer {text-align:center;}
    b.vcenter {display:inline-block;height:100%;width:1px;vertical-align:middle;}
    b.vcenter+b {display:inline-block;vertical-align:middle;}
</style>

<div class="mycontainer">
    <b class="vcenter"></b><b>This is my centered content<br>It makes me happy!</b>
</div>

请注意，由于缺少内联块和兄弟选择器（+），这个特定的代码示例在IE7中不起作用，但是使用IE7将处理的更复杂的代码可以完成相同的技术。

Answer 6

我通常不会垂直居中，但指定一个小的上边距，如20px。我们并不总是对终端用户的设备有足够的了解，无法对他们正在查看该网站的平台的方便或可用做出假设。

用CSS中心元素的最不可靠的方法是什么？

6 个答案: