How do I make a picture appear vertically centered

1th type, centering effect

<p class= "box" >
<p class= "Center" > Center Effect </p>
</p>

/* 1th, vertical centering effect */.box{       width:200px;height:200px;border:1px solid #ccc;       position:relative;  }. center{      Width:100px;height:100px;background:gray;      margin:auto;position:absolute;top:0;left:0;bottom:0;right:0;    }

2nd Image Center

<p class= "Box2" >

<span class= "Block" ></span>
</p>

/* 2nd Vertical Center *//* span is the feature of the auxiliary element vertical-align this property, which is relative to the sibling row height (line-height) to locate */.box2{    width:350px;height:350px; border:1px solid #F22727;    Text-align:center;}. center2{Vertical-align:middle;}. block{line-height:350px;} /* as high as parent * *

The 3rd kind, the center effect parent element uses display:table; child element Display:table-cell;
<p class= "Box3" >
<span class= "Center3" ></span>
</p>

/* 3rd, Centering effect */.box3{    width:350px;height:350px;border:1px solid #F22727;d isplay:table;text-align:center;}. center3{    Display:table-cell;vertical-align:middle;}

4th type, centering effect
<p class= "Box4" >

</p>

/* 4th, the Center effect  calculates */.box4{width:300px;height:300px;border:1px solid #F22727 based on the parent element    ;}. center4{    width:200px;height:200px;position:relative;left:16%;top:19%;}