关于文字的垂直居中

关于文字的垂直居中

单行文字居中,通过line-height=height的方式垂直居中

代码如下

#content{
    width: 800px;
    height:400px;
    color: #ae9061;
    background: #707070;
    line-height: 400px;
}

运行后

 

多行文字代码如下

<div id="content">
   <p>
       一人饮酒醉醉把佳人成双对两眼是独相随只求他日能双归娇女轻扶琴燕嬉紫竹林痴情红颜心甘情愿千里把君寻红颜痴情笑曲动琴声妙我轻狂高傲懵懂无知只怪太年少烟雨平凡事此生怀大志为了佳人回眸一笑立下这毒誓弃江山忘天下斩断情丝无牵挂千古留名传佳话两年征战以白发一生征战何人陪谁是谁非谁相随戎马一生为了谁能爱几回恨几回败帝王斗苍天夺得皇位以成仙豪情万丈天地间续写另类帝王篇
   </p>
</div>

样式代码

#content{
    width: 800px;
    height:400px;
    color: #ae9061;
    background: #707070;
}

运行后

 

方法一:用line-height=height做,示例如下

 

因为line-height针对的是单行文字,并不适用多行文字,不妥

方法二: 利用table

CSS代码

#content{
    width: 800px;
    height:400px;
    color: #ae9061;
    background: #707070;
    display: table;
}
#content p{
    display: table-cell;
    vertical-align: middle;
}

运行后

 

以上达到了我们想要的效果