CSS之垂直居中

1、行级元素（inline元素和inline-*元素）的垂直居中

　　1.1 单行的垂直居中

　　方法一：令包含块的上下内边距相等，即可使单行行级元素垂直居中。

　　CSS代码

    #container{    
        background:#f06d06;
        padding:50px 10px;
    }

　　HTML代码

    <div id="container">
        <span>This is a single line text.</span>
    </div>

　　效果如图

　　

　　方法二：令包含块的height和line-height相等，即可使包含在其中的单行行级元素垂直居中。

　　CSS代码

    #container{
        background:#f06d06;
        padding-left:10px;
        height:100px;
        line-height:100px;    
        white-space:nowrap;
    }

　　HTML代码

    <div id="container">
        <span>This is a single line text.</span>
    </div>

　　效果如图

　　

　　1.2 多行的垂直居中

　　方法一：将包含块的display属性设置为table-cell，即按表格单元显示，然后设置vertical-align:middle;使包含在其中的多行行级元素垂直居中。

　　CSS代码

    #container{
        width:200px;
        height:300px;
        background:#f06d06;
        padding:10px;    
        vertical-align:middle;
        display:table-cell; /*作为表格单元显示*/
    }

　　HTML代码

    <div id="container">
        <span>I'm vertically centered multiple lines of text in a real table cell.</span>
    </div>

　　效果如图

　　

　　方法二：利用弹性布局进行垂直居中

　　CSS代码

    #container{
        width:200px;
        height:300px;
        background:#f06d06;
        padding:10px;    
        display:flex;
        flex-direction:column;
        justify-content:center;
    }

　　HTML代码

    <div id="container">
        <span>I'm vertically centered multiple lines of text in a real table cell.</span>
    </div>

　　效果如图

　　

2、块级元素的垂直居中

　　2.1 知道垂直居中元素的高度

　　　　利用垂直居中元素的负外边距进行垂直居中。

　　CSS代码

    #container{
        height:300px;
        background:#f06d06;
        padding-left:20px;
        position:relative;    
    }
    .box{
        width:200px;
        height:200px;
        background:#333;
        color:#fff;    
        padding:10px;
        position:absolute;
        top:50%;
        margin-top:-110px; /*外边距为负的垂直居中元素高度的一半，这里是内容区域和内边距的高度之和*/
    }

　　HTML代码

    <div id="container">
        <div class="box">
            <span>I'm a block-level element with an unknown height, centered vertically within my parent.</span>
        </div>
    </div>

　　效果如图

　　

　　2.2 不知道垂直居中元素的高度

　　　　利用CSS的transform属性将要垂直居中的元素进行平移

　　CSS代码

    #container{
        height:300px;
        background:#f06d06;
        padding-left:20px;
        position:relative;    
    }
    .box{
        width:200px;
        background:#333;
        color:#fff;    
        position:absolute;
        top:50%;
        transform:translateY(-50%); /*向上移一半的高度*/
        padding:10px;
    }

　　HTML代码

    <div id="container">
        <div class="box">
            <span>I'm a block-level element with an unknown height, centered vertically within my parent.</span>
        </div>
    </div>

　　效果如图

　　

　　2.3 利用弹性布局垂直居中

　　CSS代码

    #container{
        height:300px;
        background:#f06d06;
        padding-left:20px;    
        display:flex; /*弹性布局*/
        flex-direction:column; /*主轴方向为垂直方向，项目在垂直方向上排列*/
        justify-content:center; /*项目在主轴方向上居中*/
    }
    .box{
        width:200px;
        background:#333;
        color:#fff;    
        padding:10px;
    }

　　HTML代码

    <div id="container">
        <div class="box">
            <span>I'm a block-level element with an unknown height, centered vertically within my parent.</span>
        </div>
    </div>

　　效果如图

　　

　　

本文参考了Chris Coyier的《Centering in CSS:A Complete Guide》和阮一峰的《Flex布局教程：语法篇》