Center CSS Picture (center horizontally and vertically)

Center CSS Picture (center horizontally and vertically)CSS Picture Center CSS Picture Horizontal center and vertical center two cases, sometimes need the picture at the same time horizontal vertical center,below are some of the center conditions are described separately:CSS image horizontally centered using margin:0 Auto to achieve horizontal center of picture

Using margin:0 Auto to center the image is to add a CSS style to the image margin:0 auto as follows:

 <  div  style  = "text-align:center; width:500px; border:green solid 1px;"  >  <  img  alt  = ""   src  = "Https://www.baidu.com/img/baidu_jgylogo3.gif"   style  = "margin:0 auto;"  />  </ div  >  

Use the horizontal Center property of text Text-align:center

The code is as follows:

 <  div  style  = "text-align:center; width:500px; border:green solid 1px;"  >  <  img  alt  = ""   src  = "Https://www.baidu.com/img/baidu_jgylogo3.gif"   style  = "Display:inline-block;"  />  </ div  >  

CSS Image Vertical Center using high = = line height to achieve vertical center of the picture

This method is to know the height can be used, the code is as follows:

<style= "text-align:center; width:500px;height:200px; line-height:200px; border: Green solid 1px; " >   <  alt= ""  src= "Https://www.baidu.com/img/baidu_jgylogo3.gif"  Style= "display:inline-block; vertical-align:middle;" /> </ Div >

Vertically center the picture with table

The method of using table is to take advantage of the vertical center property of table, the code is as follows:

Here display:table is used, and display:table-cell; To simulate table, this method is not compatible IE6/ie7,ie67 does not support display:table, If you don't need to support IE67, then you can use it.

Cons: When you set a display:table, it may change your original layout

<Divstyle= "text-align:center; width:500px;height:200px; display:table;border:green solid 1px;"><spanstyle= "Display:table-cell; vertical-align:middle; ">
<imgalt=""src= "Https://www.baidu.com/img/baidu_jgylogo3.gif"style= "Display:inline-block;" />
</span></Div>

Vertical centering of images with absolute positioning

If you know the width and height of the picture, the code looks like this:

 <  div  style  = "width:500px;height:200px; position:relative; border:green solid 1px;"     >  <  img  alt  = ""   src  = "Https://www.baidu.com/img/baidu_jgylogo3.gif"   style  = "width:120px; height:40px;position:absolute; left:50%; top:50%; Margin-left: -60px; Margin-top: -20px; " />  </ div  >  

The mobile side can use the flex layout to achieve a vertically centered CSS picture

The mobile side of the General browser version is relatively high, so you can boldly use the Flex layout, (Flex layout reference CSS3 Flex layout usage) Demo code is as follows:

CSS code:

<styletype= "Text/css">. Ui-flex{Display:-webkit-box!important;Display:-webkit-flex!important;Display:-ms-flexbox!important;Display:Flex!important;-webkit-flex-wrap:Wrap;-ms-flex-wrap:Wrap;Flex-wrap:Wrap}. Ui-flex,. Ui-flex *,. Ui-flex:after,. Ui-flex:before{box-sizing:Border-box}. Ui-flex.justify-center{-webkit-box-pack:Center;-webkit-justify-content:Center;-ms-flex-pack:Center;justify-content:Center}. Ui-flex.center{-webkit-box-pack:Center;-webkit-justify-content:Center;-ms-flex-pack:Center;justify-content:Center;-webkit-box-align:Center;-webkit-align-items:Center;-ms-flex-align:Center;Align-items:Center}    </style>  

 < Span class= "Hljs-selector-class" > < Span class= "Hljs-attribute" >  HTML code:               

<Divclass= "Ui-flex justify-center Center"style= "Border:green solid 1px; width:500px; height:200px;">    <Divclass= "Cell">    <imgalt=""src= "Https://www.baidu.com/img/baidu_jgylogo3.gif"style="" />    </Div></Div>

 < Span class= "Hljs-selector-class" >&NBSP;             

This article transferred from: http://www.51xuediannao.com/html+css/htmlcssjq/css_img_center.html

Center CSS Picture (center horizontally and vertically)