Vertically centered summary of text

1. The height of the parent element of a single line of text is set

 1> Use line-height to achieve vertical centering

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

</style>
<div class='one1'>
    I want to center vertically
</div>

2> Use table-cell and  vertical-align to center

<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% ;   /* Compatible with ie7 and below */ 
     } 
.one1 span { *position : relative ; *top : -50% ;  /* Compatible with ie7 and below */   } 
< / style > 
< div class = "mainText" > 
  < div class = 'one1' > 
    < span > large text </ span > 
   </div>
</div>

2. The height of multi-line text is also determined by table-cell.

3. The parent height is indeterminate

1>. Use padding

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

<div class='one2'>
 Here is a large paragraph of text, and then I want to vertically center it, here is a large paragraph of text, and then I want to vertically center it
Here is a large paragraph of text, and then I want to vertically center it, here is a large paragraph of text, and then I want to vertically center it
</div>

2>. The height of the child div is determined, using 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>
        This is the vertical centering determined by the height of the multiline text subdiv, This is the vertical centering determined by the height of the multiline text subdiv, and this is the vertical centering determined by the height of the multiline text subdiv,
    </span>
   </div>
</div>

3>. The height of the child div is uncertain, use 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>
          Here is the vertical centering of the multiline text child div with indeterminate height,
        Here is the vertical centering of the multiline text child div with indeterminate height,
      Here is the vertical centering of the multiline text child div with indeterminate height,
    </span>
   </div>
</div>

Compatible with ie9+

above.

Vertically centered summary of text

Guess you like