Center vertically in Css__div

Create a simple HTML template:

<div class= "box" style= "Height:100px;width:100px;text-align:center" >   <span class= "inner" >line< /SPAN> </div>

1. Using Line-height

It can be used when the div height is fixed and is not wrapped. (Note: If there is a line break, then each row has a container that high)

. box{   line-height:100px;}

NOTE: Although IMG is Inline-block, it is sometimes found not to be centered with span, because the vertical-align attribute causes the need to add:

. box img{  vertical-align:center;  }

2.flex Flexible layout

. box{  Display:flex;  Align-items:center;  }

3.display:table-cell

. box{  Display:table-cell;  Vertical-align:middle;}

Center vertically in Css__div