CSS垂直居中

我怎么能在一个<div>垂直居中<div>

我的代码到目前为止:

 <div style="height:322px;overflow:auto;"> <div style="border: Solid 1px #999999;padding:5px;"> </div> </div> 

我曾尝试过“顶尖:50%” 和“vertical-align:middle” 没有成功

编辑:好吧,所以已经讨论了很多。 而且我也许开始了另一场迷你火焰战争。 但为了争辩,我怎么会用一张桌子呢? 到目前为止,我已经使用了css来处理所有其他事情,所以不是我没有尝试使用“良好实践”。

编辑:内部股利没有固定的高度

总之,你塞满了。 更多关于这个在最近的问题,我问你可以做这个HTML布局,而不使用表? 基本上,CSS狂热分子需要掌握一些东西,意识到只有一些事情你不能做(或不能做好)没有表格。

这种反桌面歇斯底里是可笑的。

表格单元格可以很好地处理垂直居中,并且尽可能向后兼容。 他们还处理并排内容的方式比浮点,相对/绝对定位或任何其他CSStypes的方法更好。

乔尔(Joel)在“ 不要让build筑宇航员”吓倒你的时候,创造了(或者至less是普及化的)“build筑师宇航员”一词。 那么,我认为“CSS宇航员”(或“CSS空间立宪员”)这个词同样适用。

CSS是一个非常有用的工具,但它也有一些非常严重的限制。 我最喜欢的编号列表只能显示为“3”。 但不是“3)”或“(3)”(至less在CSS3生成的内容之前 – 或者是CSS2.1?不pipe它是否得到广泛的支持)。 多么疏忽

但比这更大的是垂直居中和并排布局。 这两个领域对于纯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与相对+绝对+相对定位只是为了获得垂直居中 。 我很抱歉,不pipe是谁写的 – 任何人认为这是一个好diea – 只是失去了阴谋。

表格与CSS:CSS Trolls进行了比较 。 证据确实在布丁。 排名前20的(Alexa)网站绝大多数仍然使用表格进行布局。 有很好的理由。

所以,请自己决定:你想让自己的网站工作,并花费更less的时间来工作? 或者你想成为一名CSS宇航员?

这是不平凡的,可以有警告,这不是什么CSS处理好。

然而,它广泛讨论和googleable 。 这是一个很好的例子。

无论你做什么,请不要回退到桌子。


编辑:这是荒谬的,下面的工作完全在一个严格的文件,而不诉诸表格标记:

 <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> 

我最喜欢这个解决scheme 。 这是为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> 

顶部:50%; 应该工作。 你需要把margin-top放到高度的负半边,否则就会在中间开始。 因此,你需要内部div的高度。 你也可能需要位置:相对;

像这样的东西你内心div。

 position:relative; top: 50%; height:80px; margin-top: -40px; /*set to a negative number 1/2 of your height*/ 

不是非常整齐的负尺寸(甚至是什么意思?),但也许是最简单的方法。

 <div style="display: table; height: 400px; #position: relative; overflow: hidden;"> <div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;"> <div style=" #position: relative; #top: -50%"> vertically centered </div> </div> </div> 

更多信息

两种技巧很多

以下浏览器兼容性仅在IE中testing过。 现代浏览器应该处理这些没有问题。

#1 – 绝对和自动保证金

兼容性: IE 8 +

  • 顶部,右侧,底部,左侧和margin: auto垂直和水平居中的div。

  • 宽度和高度是必要的,但可以是百分比

也可以应用于父级设置position: relative的内部div position: relative

注: max-widthmax-height而不是百分比高度是可能的IE 9 +。 IE 8需要一个height

 html, body { height: 100%; } .outer { background: #ff8f00; height: 50%; width: 50%; margin: auto; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } 
 <div class="outer"></div> 

你绝对需要用CSS做这个吗? 上面的链接看起来不错,但你可以得到一个结果使用javasctipt / jquery – 确定高的div的div,并相应地调整margin.padding。 类似于 :(jquery)

 var gap = ( $('the-outer-div').height() - $('the-inner-div').height() ) /2; $('the-inner-div').css( "margin-top" , gap ); 

如果您愿意使用Flexbox显示模型,则不需要表格。

例如

 <div style="height: 322px; width: 200px; display: flex; background: gray;"> <div style="border: Solid 1px #999999; padding:5px; margin: auto;"> This text would be both vertically AND horizontally centered, if it's inner height and width were less than the parent's height and width. </div> </div> 

如果您只想垂直居中使用规则“margin:auto 0;” 在孩子div。

ps如果您需要跨浏览器兼容性(例如“display:-webkit-flexbox;”),则必须在Flexbox的前面添加前缀

display: flex属性对于垂直和水平方向的居中效果特别好。 对于垂直居中,请将属性display: flexjustify-content: center到容器。

尝试行高