文字的垂直居中总结

<style>
 .one1{width:100px;height:30px;line-height:30px;text-align:center;overflow:hidden;} 

</style>
<div class=‘one1‘>
    我要垂直居中啊
</div>

<style>
.mainText{
        width: 200px;height: 100px;
        margin: 20px auto; border: 1px solid #f00;
        display: table;
        *position:relative; /* 兼容ie7以下 */
       }
.one1{width:100%;display:table-cell;vertical-align: middle;text-align: center;
       *position:absolute;*top:50%;  /* 兼容ie7以下 */
     }
.one1 span{*position:relative;*top:-50%; /* 兼容ie7以下 */  }
</style>
<div class="mainText">
  <div class=‘one1‘>
    <span>大段文字啊</span>
   </div>
</div>

<style>
.one2{width:300px;text-align:center;border:1px solid #f00;
padding:30px}
</style>

<div class=‘one2‘>
 这里是大段的文字，然后我要垂直居中啊这里是大段的文字，然后我要垂直居中啊
这里是大段的文字，然后我要垂直居中啊这里是大段的文字，然后我要垂直居中啊
</div>

<style>
.mainText{width:400px;height:auto; position:relative;margin:20px auto;}
 .one2{width: 60px;height:60px;position:absolute;top:50%;margin-top:-50px; left:50%;margin-left:-150px;text-align:center;border:1px solid #f00;padding:20px;
 }
</style>
<div class="mainText">
  <div class=‘one2‘>
    <span>
        这是多行文本子div高度确定了的垂直居中， 这是多行文本子div高度确定了的垂直居中， 这是多行文本子div高度确定了的垂直居中，
    </span>
   </div>
</div>

<style>
 .mainText{width:400px;height:auto;margin:20px auto;border:1px solid #f00;
        display:flex;
        justify-content: center;
        -webkit-justify-content: center;
        -webkit-align-items: center;
        align-items:center;}
    .one2{width:200px; }
</style>

div class="mainText">
  <div class=‘one2‘>
    <span>
          这是多行文本子div高度不确定的垂直居中，
        这是多行文本子div高度不确定的垂直居中，
      这是多行文本子div高度不确定的垂直居中，
    </span>
   </div>
</div>