我的 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 一个自动边距和宽度，它就会水平居中。确保垂直居中的最不可怕的方法是什么？
我知道以下文章提供了对该主题的一些讨论:
最佳答案
由于这个问题被标记为 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 .
关于css - 使用 CSS 使元素居中最不可怕的方法是什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7781014/