tro*_*ine 21 css vertical-alignment css3
我的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自动边距和宽度,则它是水平居中的.确保它垂直居中的最不可怕的方法是什么？
我知道以下文章提供了一些关于该主题的讨论:
Mar*_*cel 12
由于此问题已被标记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;
}
可以在此处找到更完整的演示.