要实现如图一所示的结果：

html代码如下：

    
         
             
         
     
        
      这是一个测试要居中        
      
       我是div中的文字
      
    
     

相应的less代码

.content{
       width: 500px;    height: 200px;    border:1px solid red;    position: relative;    line-height: 200px;/*让class=content父div中的文字垂直居中*/    span{        background: green;    }    .box{
           background: yellow;        float: left;        width: 200px;        height: 100px;        line-height: 100px;/*让黄色div中的文字内容垂直居中*/        text-align: center;/*让文字水平居中*/        position: absolute;        top:50%;        margin-top: -50px;        margin-left: 200px;        }}

②使用vertical-align:middle设置在父元素中的位置，

效果图：

html代码：

    
         
             
         
     
              我是div中的文字
      
       我是子元素的文字
      
    
     

相应的css代码：

.content{
       width: 500px;    height: 200px;    line-height: 200px;/*设置其文字内容垂直居中*/    border:1px solid red;    .pox{        background: yellow;        width: 200px;        height: 70px;        display: inline-block; /*一定要将div设置为inline-block*/        vertical-align: middle;/*设置该元素在父元素中的位置*/        line-height: 70px;        border: 1px solid green;        text-align: center;    }}

 化简后的核心代码：

.content{
       width: 500px;    height: 200px;    line-height: 200px;/*设置其文字内容垂直居中*/    background:red;    .pox{        height: 70px;/*给内部div设置了高度，该div才会垂直居中*/         display: inline-block; /*一定要将div设置为inline-block*/        vertical-align: middle;/*设置该元素在父元素中的位置*/        background: yellow;    }}