css – 在div中垂直定位文本的方式怎么样?

我总是在div中寻找中间定位文本的替代方法,有很多方法,从 javascript动态定位到最新的css单元vw和vh.
前几天我意识到还有另外一种方式始终在我面前,但我从未使用它,即通过将div显示为表格单元格
display:table-cell; vertical-position:middle http://jsfiddle.net/manolis/TPKsf/
我还没有在生产中使用它,但我想知道使用这个解决方案的优缺点是什么.

谢谢!

解决方法

display:table-cell可能有一些你不想要的后果.通过快速搜索,我找到了一些相关信息:

> display:table-cell元素应该在display:table元素内(但是don’t necessarily need to be in a display:table-row element).
> display:table-cell元素没有边距.
>表格不会像div那样自动占据整个宽度.
> QuirksMode docs on display:table有一些有趣的信息,甚至还有一个“游乐场”,你可以轻松地改变元素的显示,看看它们是如何相互作用的.

我的看法:如果你在display:table元素中正确地形成它,并且你只需要表格格式正常的有限目的,那就去做吧(例如,将404错误垂直居中作为页面上的唯一框).

相关文章

Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效