css垂直居中 [英] css vertical centering
问题描述
如何在< div> ？
我的代码到目前为止：
<div style="height:322px;overflow:auto;">
<div style="border: Solid 1px #999999;padding:5px;">
</div>
</div>
我试过top：50％和vertical-align：middle;没有成功
i have tried "top:50%;" and "vertical-align:middle;" without success
编辑：好，所以已经讨论了很多。和我可能开始另一个小火焰战争。但为了论证的缘故，我怎么会做一个表呢？我已经使用css到目前为止所有的东西，所以它不是我不想使用好的做法。
okay so it's been discussed a lot. and i've maybe started another mini flame war. but for argument sake, how would i do it with a table then? i've used css for everything else so far so it's not like i'm not trying to employ "good practices".
编辑：内部div没有固定的高度。
the inner div does not have a fixed height
推荐答案
简而言之，更多关于此在最近的问题，我问你能做这个HTML布局不使用表？基本上，CSS狂热者需要抓住，意识到有些事情你不能做（或不能做好）没有表。
In short, you're stuffed. More on this in a recent question I asked Can you do this HTML layout without using tables? Basically the CSS fanatics need to get a grip and realize there's simply some things you can't do (or can't do well) without tables.
这种反表歇斯底里是没有可笑的。
This anti-table hysteria is nothing short of ridiculous.
表格单元格处理垂直对中真的很好，并向后兼容，尽可能你可能关心。他们还处理并排内容的方式比浮动，相对/绝对定位或任何其他CSS类型方法。
Table cells handle vertical centering really well and are backwards compatible as far as you could possibly care about. They also handle side-by-side content way better than floats, relative/absolute positioning or any of the other CSS type methods.
Joel创造（或至少普及）在不要让建筑宇航员吓唬你的建筑宇航员一词。同样，我认为CSS宇航员（或CSS太空学员）这个术语同样合适。
Joel coined (or at least popularized) the term "architect astronauts" in Don't Let Architecture Astronauts Scare You. Well, in that same vein I think the term "CSS Astronaut" (or "CSS Space Cadet") is equally appropriate.
CSS是一个非常有用的工具，有一些相当严重的限制。我最喜欢的编号列表只能显示为3。但不是3）或（3）（至少在CSS3生成内容之前 - 或者是CSS2.1？无论如何它不被广泛支持）。什么监督。
CSS is an incredibly useful tool but it also has some pretty serious limitations. My favourite ishow numbered lists may only appear as "3." but not "3)" or "(3)" (at least prior to CSS3 generated content--or is it CSS2.1? Either way it's not widely supported). What an oversight.
但是比那更大的是垂直居中和并排布局。这两个领域对于纯CSS仍然是一个巨大的问题。另一个海报决定相对定位结合负边距高度是要走的路。如何比任何更好：
But bigger than that is vertical centering and side-by-side layout. These two areas are still a huge problem for pure CSS. Another poster decided the relative positioning combined with negative margin heights was the way to go. How is that any better than:
<html>
<head>
<title>Layout</title>
<style type="text/css">
#outer { height: 200px; border: 1px solid black; width: 600px; background-color: #DDD; }
#inner { width: 150px; border: 1px solid red; background: yellow; margin: auto; line-height: 100%; }
</style>
</head>
<body>
<table>
<tr>
<td id="outer">
<div id="inner">Inner</div>
</td>
</tr>
</table>
</body>
</html>
每次都可以随时随地使用。
which will work everywhere, everytime.
这是关于CSS中垂直居中的文章。为了实现类似的目的，他们使用三个嵌套div 和相对+绝对+相对定位只是为了获得垂直居中。对不起，只要写这篇文章，任何人都认为这是一个很好的故事。
Here is an article on vertical centering in CSS. To achieve a similar thing they use three nested divs with relative+absolute+relative positioning just to get vertical centering. I'm sorry but whoever wrote that--and anyone who thinks that's a good diea--has simply lost the plot.
反驳在表vs CSS：CSS Trolls begone 。证明确实在布丁。绝大多数前20（Alexa）网站仍然使用表格布局。 有充分的理由。
A counterargument is given in Tables vs CSS: CSS Trolls begone. The proof really is in the pudding. The vast majority of the top 20 (Alexa) sites still use tables for layout. With good reason.
请自行决定：您希望自己的网站正常工作，还是你想成为一名CSS宇航员？
So decide for yourself: do you want your site to work and spend less time getting it to work? Or do you want to be a CSS Astronaut?
这篇关于css垂直居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
