文字的垂直居中总结

Posted 2020-11-03 jolee

1.单行文本的 父元素高度设定

  

 1>利用line-height 来实现垂直居中

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

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

 

  

2>利用table-cell 和 vertical-align 来居中 

<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>

2.多行文本的高度确定的  同样利用table-cell 来实现

3.父级高度不确定的  

1>.利用padding

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

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

 

2>.子div高度确定，利用position:absolute 

<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>

 

3>.子div高度不确定，利用display:flex

<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>

  兼容ie9+

 

以上。