CSS垂直居中
我怎么能垂直居中<div>内的<div>？
到目前为止我的代码：
<div style="height:322px;overflow:auto;">
<div style="border: Solid 1px #999999;padding:5px;">
</div>
</div>
我已经尝试过“ top：50％”；和“ vertical-align：middle”；没有成功
编辑：好的，所以已经讨论了很多。我也许已经开始了另一场小型的火焰战争。但是为了论证，那我该如何用一个表呢？到目前为止，我已经将CSS用于其他所有内容，所以这并不是说我没有尝试采用“良好做法”。
编辑：内部div没有固定的高度
qq_笑_17浏览 375回答 3
3回答
-
德玛西亚99
简而言之，您已被塞满。我最近问了一个问题，您可以在不使用表的情况下进行HTML布局吗？ 基本上，CSS狂热者需要抓紧时间并意识到，有些事情如果没有表就无法做（或做得不好）。这种反餐桌的歇斯底里简直荒唐可笑。表格单元格可以很好地处理垂直居中，并且可以向后兼容。它们还比浮动，相对/绝对定位或任何其他CSS类型方法更好地处理并排内容。乔尔创造了（或至少普及了）“ 不要让建筑宇航员吓到你 ”一词中的“建筑师宇航员” 。同样，我认为“ CSS宇航员”（或“ CSS太空少年”）一词同样适用。CSS是一个非常有用的工具，但是它也有一些严重的局限性。我最喜欢的编号列表可能只显示为“ 3”。但不是“ 3）”或“（3）”（至少在CSS3生成的内容之前-还是CSS2.1？这两种方式均未得到广泛支持）。真是个疏忽。但更大的是垂直居中和并排布局。对于纯CSS而言，这两个领域仍然是一个巨大的问题。另一位张贴者认为，相对定位加上负边距高度是必经之路。有什么比以下更好的了：<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>它将随时随地工作。这是有关CSS垂直居中的文章。为了实现类似的目的，他们使用三个具有相对+绝对+相对定位的嵌套div 来获得垂直居中。我很抱歉，但是无论谁写这封信-以及任何认为那是个好主意的人-都只是丢掉了情节。在Tables vs CSS中提出了一个反驳：CSS Trolls begone。证明确实在布丁里。前20个（Alexa）网站中的绝大多数仍使用表格进行布局。 有充分的理由。因此，请自己决定：您是否要让您的网站正常工作，并花费更少的时间使它正常工作？还是您想成为CSS宇航员？ -
BIG阳
这是不平凡的，可能有一些警告，并且CSS还不能很好地处理这一点。但是，它已被广泛讨论并可以谷歌搜索。这是一个很好的例子。无论您做什么，都请不要退回表格。编辑：这很荒谬，以下代码在严格的文档中可以很好地工作而无需求助于表标记：<style type="text/css">.outer {height: 322px; overflow: hidden; position: relative;}*|html .outer {display: table; position: static;}.middle {position: absolute; top: 50%;}*|html .middle {display: table-cell; vertical-align: middle; position: static;}.inner {position: relative; top: -50%; overflow: auto;}*|html .inner {position: static; max-height: 322px;}</style><!--[if IE]><style>.inner {height: expression(Math.min(this.scrollHeight,322)+'px'); width: 100%;} /* for explorer only */</style><![endif]--><div class="outer"> <div class="middle"> <div class="inner"> Any text any height </div> </div></div> -
慕容森
我最喜欢这个解决方案。它适用于IE8 +，并且易于理解。<style>/* Can be any width and height */.block { height:500px; text-align: center;}/* The ghost, nudged to maintain perfect centering */.block:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: -0.25em; /* Adjusts for spacing */}/* The element to be centered, can be any width or height */ .centered { display: inline-block; vertical-align: middle; width: 300px;}</style><div class="block"><div class="centered">Centered Content</div></div>
随时随地看视频慕课网APP
Html/CSS