div文字居中

1.文字垂直居中

<div>要垂直居中的文字</div>

div{height:50px;line-height:50px;}

2.背景图片大小自适应

div{

    background: url("../s-bg1.png") no-repeat;background-size:contain;

}

3.背景图片，文字自适应居中

< div class= "row" >

         < div class= "service-bg service-bg1 col-lg-3 col-md-3 col-xs-3" >

< div class= "s-content" >已受理 </ div >

</ div >

< div class= "service-bg service-bg2 col-lg-3 col-md-3 col-xs-3" >

< div class= "s-content" >工程师正在处理您的问题 </ div >

</ div >

< div class= "service-bg service-bg3 col-lg-3 col-md-3 col-xs-3" >

< div class= "s-content" >待您确认处理结果 </ div >

</ div >

< div class= "service-bg service-bg3 col-lg-3 col-md-3 col-xs-3" >

< div class= "s-content" >待您评价 </ div >

</ div >

</ div >

css代码：

.service-bg{ height: 50px; display: table; position: relative; text-align: center; color: #fff;}

.service-bg1{ background: url( "../img/service/s-bg1.png") no-repeat; background-size: 100% 100%;}

.service-bg2{ margin-left: -30px; background: url( "../img/service/s-bg2.png") no-repeat; background-size: 100% 100%;}

.service-bg3{ margin-left: -30px; background: url( "../img/service/s-bg3.png") no-repeat; background-size: 100% 100%;}

.s-content{ display: table-cell; top: 45%; vertical-align: middle;}