css控制元素垂直居中的几种方法

一、单行文本垂直居中

HTML：

<div id="parent">
<div id="child">Content here</div>
</div>

CSS：

#child {
line-height: 200px;
}

二、垂直居中一张图片

HTML

<div id="parent">
<img src="image.png" alt="" />
</div>

CSS

#parent {
line-height: 200px;
}
#parent img {
vertical-align: middle;
}

以下CSS代码，都以本HTML为基础：

HTML

<div id="parent">
<div id="child">Content here</div>
</div>

三、块级元素

CSS

#parent {
        position: relative;
        height: 200px;
        width: 200px;
       background: #090;
    }

#child {
       background: #900;
        position: absolute;
        top: 50%;
        left: 50%;
        height: 30%;
        width: 50%;
        margin: -15% 0 0 -25%;
    }

四、通用

CSS

#parent {
border: 1px #111 solid;
height: 200px;
display: table;
}

#child {
/* 无法设置宽高*/
display: table-cell;
vertical-align: middle;
}

五、通用，但在IE版本低于7时不能正常工作

CSS

#parent {
        position: relative;
        height: 200px;
        width: 200px;
        background: #090;
    }

    #child {
        background: #900;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 50%;
        height: 30%;
        margin: auto;
    }

六、通用

CSS

#parent {
        background: #090;
        padding: 5% 0;
    }

    #child {
        background: #900;
        padding: 10% 0;
    }

七、通用

HTML

<div id="parent">
        <div id="floater"></div>
        <div id="child">Content here</div>
</div>

CSS

#parent {
        background: #090;
        height: 250px;
    }

#child {
        background: #900;
        clear: both;
        height: 100px;
    }

#floater {
        float: left;
        height: 50%;
        width: 100%;
        margin-bottom: -50px;
    }

参考文章《vertical-centering》