css td居中_五个方法实例代码详解教你在CSS中实现垂直居中

点击上面“蓝字”关注我们

你是否和小编一样在编辑一个版面时，通常用到水平居中和垂直居中，而水平居中很好处理，不外乎就是设定margin:0 auto;或是text-align:center;，就能轻松解决掉水平居中的问题，但一直以来最麻烦对齐问题，都是“垂直居中”这个讨人厌的设定，以下将介绍五种单纯利用CSS垂直居中的方法。

方法1：设定行高(line-height)

设定行高是垂直居中最简单的方式，适用于“单行”的“行内元素”(inline、inline-block)，例如单行的标题，或是已经设为inline-block属性的div，若将line-height设成和高度一样的数值，则内容的行内元素就会被垂直居中，不过由此就可以看出，为什么必须要单行的行内元素，因为如果多行，第二行与第一行的间距会变超大，就不是我们所期望的效果了。示例：