Center CSS Picture (center horizontally and vertically)

Http://www.51xuediannao.com/html+css/htmlcssjq/css_img_center.html

CSS Picture Center CSS Image Horizontal center and vertical center two cases, and sometimes need the picture at the same time horizontal vertical center, the following several centers are described separately

CSS Picture Center CSS Picture Horizontal center and Vertical center Two cases, sometimes also need the picture at the same time horizontal vertical Center , the following several centers 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; " ><alt=src=style="margin:0 auto;"/> </div>Run code    

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; " ><alt=src=style="display:inline-block;"/></div> Run code  

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:

<div style="Text-align:center; width:500px;height:200px; line-height:200px; Border:green solid 1px; " >   <alt=src=style="Display:inline-block; vertical-align:middle; "/></div> Run code       

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

<div style="Text-align:center; width:500px;height:200px; Display:table;border:green solid 1px; " ><style="Display:table-cell; Vertical-align:middle; "><alt=src=style=" display:inline-block; "/></span></ div> Running code            

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; " ><alt=src=style="width:120px; Height:40px;position:absolute; left:50%; top:50%; Margin-left: -60px;margin-top: -20px; "/></div> running code       

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" >/*Web front-end developmenthttp://www.51xuediannao.com/*/. 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>  HTML code:  < Div class= "Ui-flex Justify-center Center" style= "Border:green solid 1px; width:500px; height:200px; " > <div class=  "cell" ><img alt= "src= "Https://www.baidu.com/img/baidu_jgylogo3.gif" style=</div></ Div> Run code               

This article links: CSS Picture Center (horizontal center and vertical center) http://www.51xuediannao.com/html+css/htmlcssjq/css_img_center.html

CSS Image Center (horizontal center and vertical center) by lazy people to build stations to collect and organize, you can freely spread, please take the initiative to bring this article link

Lazy people build station is free to share, feel useful to support a bit more, no can help you, lazy people can only express regret, hope one day can help you.

Center CSS Picture (center horizontally and vertically)