CSS的垂直居中

1、单行文字的垂直居中
对于单行文本我们可以设置line-height和height的值相等就可以实现垂直居中。

举例：




    
    
    
    
    



    
CSS实现文本垂直居中

运行结果：

2、多行文本的垂直居中

语法：
父元素{
display:table-cell;
vertical-align:middle;
}
span{
display:inline-block;
}

举例：




    
    
    
    
    



    

        
            送杜少府之任蜀州

            城阙辅三秦，风烟望五津。

            与君离别意，同是宦游人。

            海内存知己，天涯若比邻。

            无为在歧路，儿女共沾巾。

运行结果：

3、块元素（block）的垂直水平居中
对于高度已知的块元素，可以用万能的"position"方法来实现。使用该方法父元素和子元素都必须定义宽度和高度。（position方法还可以用于inline、
inline-block元素）

/*
若想单独实现垂直居中，去掉left和margin-left这两个属性。
若想单独实现水平居中，去掉top和margin-top这两个属性。
*/
语法：

父元素{
position:relative;
}
子元素{
position:absolute;
top:50%;
left:50%;
margin-top:height一半的负值；
margin-left:width一半的负值；
}

举例：





    
    
    
    
    



    

        

    

运行结果：

3、行内块元素的垂直居中
对于行内块元素的垂直居中，可以使用"display:table-cell"结合
"vertical-align:middle"实现。

语法：

父元素{
display:table-cell;
vertical-align:middle;
}
子元素{
vertical-align:middle;
}

举例：





    
    
    
    
    



    

        
    

运行结果：