<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Vertical center of picture up and down</title> <style>. Demo1{width:600px;Height:300px;Border:1px solid Red;position:relative;margin:20px Auto}. demo1 img{position:Absolute;Top:0; Left:0; Right:0;Bottom:0;margin:Auto}. Demo2{width:600px;Height:300px;Border:1px solid Red;position:relative;margin:20px Auto}. Demo2 img{position:Absolute;Top:50%; Left:50%;Margin-top:-110px;Margin-left:-73px;}. Demo3{width:600px;Height:300px;Border:1px solid Red;position:relative;margin:20px Auto}. Demo3 img{position:Absolute; Left:50%;Top:50%;Transform:Translate ( -50%, -50%);-webkit-transform:Translate ( -50%, -50%);}. Demo4{width:600px;Height:300px;Border:1px solid Red;position:relative;Display:Table-cell;text-align:Center;vertical-align:Middle;}
. demo5{width:600px;height:300px;border:1px solid red;position:relative;margin:20px auto;line-height:300px; Text-align:center;}
. Demo5 Img{vertical-align:middle;} </style></Head><Body> <Divclass= "Demo1"> <!--1, absolute positioning Position:absolute;top:0;left:0;right:0;bottom:0;margin:auto (incompatible ie6-7) - <imgsrc= "Images/demo.jpg"alt=""> </Div> <Divclass= "Demo2"> <!--2, absolute positioning position:absolute;top:50%;left:50%;margin-top: -110px;margin-left: -73px; (compatible with the mainstream browser, but the IMG image is fixed to a high width) - <imgsrc= "Images/demo.jpg"alt=""> </Div> <Divclass= "Demo3"> <!--3, CSS3 Position:absolute; left:50%; Top:50%;transform:translate ( -50%, -50%); (CSS3 ie9+) - <imgsrc= "Images/demo.jpg"alt=""> </Div> <Divclass= "Demo4"> <!--4, Display:table-cell; (CSS3 ie9+) - <imgsrc= "Images/demo.jpg"alt=""> </Div>
<div class= "Demo5">
<!-- 5,vertical-align: Middle; (This method can also be implemented, but to add the height of the corresponding Div) -
<img src= "images/demo.jpg" alt= "">
</div>
</Body></HTML>
:
There are new ways to look at the directions of the great God.
The CSS image is centered vertically up and down