css垂直居中常用方法

前不久毕设写的差不多了，就想复习复习css的内容，对着效果图写了几个页面，发现好多地方都需要垂直居中，情况还多种多样。有单行文本需要垂直居中的、多行文本需要垂直居中的、图片需要垂直居中的、块级元素需要居中的，这些内容让我有些懵，于是今天晚上我就想把垂直居中的方法都总结一下，算是对之前的复习，也顺便帮助自己理一理。

1、单行文本垂直居中

很多时候，网页中都需要文字垂直居中显示，比如在一个h1标签中，需要文字垂直居中。在这里先讨论单行文本的情况，比如，我们有一个高度为100px的段落，段落中有一行字，现在它们的样子是这样:

这个粉红色的区域就是段落的区域，我们现在需要将段落中的字垂直居中，该怎么做呢？很简单，可以使用行间距line-height这一个属性来达到需要，只需要让它的值等于文本节点所在元素的高度即可。在这里，即让line-height=100px，代码如下

p{
            width:100px;
            height:100px;
            line-height:100px;
            background-color:pink;
        }

让height和line-height相等，即可实现单行文本的垂直居中，效果如下：

2、多行文本垂直居中

单行文本垂直居中，可以让line-height与height一致，那多行文本可以吗？实验证明是不可以的，这个需要从line-height的意义说起，这个属性代表的行间距，能够影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离。line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。若我们在对多行文本进行垂直居中时也使用刚刚对单行文本使用的方法，那么可以想到，本文行之间的距离会非常大，有些行可能会超出元素框

那么对多行文本应该怎么样设置垂直居中呢？其实想想表格单元，就可以找到方法啦。在表格中，我们可以通过vertical-align来让表格单元中的文本居中，那么在段落元素中，我们也可以使用vertical-middle来实现文字居中。不过在使用这个属性之前，我们需要先让段落元素从块变为单元格，即使用display：table-cell。代码如下：

display:table-cell;
vertical-align:middle;

通过这两行代码，就可以实现文本的多行垂直居中了。

效果如下：

并且，这个方法不仅可以用于文字的垂直居中，还可以用于图片的垂直居中哟！

 

3、块元素的垂直居中

除了让文本和图片等内容垂直居中，很多时候也需要让块元素垂直居中。对于块级元素，要让它垂直居中，可以设置它的position属性为relative，然后设置它的top值为50%，这样元素在竖直方向上就会移动到中间偏下的位置了。要想让它处于中间的位置，只需要使用margin值，让它向上移动它自身高度的一般即可。代码如下：

width:100px;
height:100px;
position:relative;
top:50%;
margin-top:-50px;

使用上面的方法就可以实现块元素的垂直居中了，详细的实施过程可以参考这篇博客http://www.cnblogs.com/yugege/p/5246652.html