Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how css makes img center vertically". In daily operation, I believe many people have doubts about how css makes img center vertically. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the doubts of "how css makes img center vertically". Next, please follow the editor to study!

There are many ways for img to center vertically, including the following three methods

1. Use flex to center img vertically

In css, we can use flex to achieve vertical centering, but flex is not a good method, and many browsers do not support flex, such as IE8,9.

First of all, we need to add a div to the picture, and define the width as 100px and the height as 100px, and define some basic attributes for it, in which we set the display element in the div to flex, and then add the align-items:center attribute to the other.

Css Code:

Body {background:#999}

.flexbox {width:300px;height:250px;background:#fff;display:flex;align-items:center}

.flexboximg {width:100px;height:100px;align-items:center;}

two。 Using display to achieve vertical centering of img

First of all, if we first create a div, and set the style of the div with a picture, we can add a diaplay to the parent of the img, and the property is table, and set the display property in the div containing the picture to table-cell. In fact, to achieve the center, all we need to do is to set the vertical-align:middle; property to the div with the picture.

Css Code:

.tablebox {width:300px;height:250px;background:#fff;display:table}

# imgbox {display:table-cell;vertical-align:middle;}

# imgboximg {width:100px}

3. Use the absolute positioning of the picture to realize it.

We set the div with a picture to have a background, add relative attributes to the parent element of the img, add absolute and relative attributes to the child elements, and set the value of top to 50%. Now all we need to do is set the img element to a negative margin-top value.

Css Code:

Body {background:#ccc;}

.posdiv {width:300px;height:250px;background:#fff;position:relative;margin:0auto}

.posdivimg {width:100px;position:absolute;top:50%;margin-top:-50px;}

We recommend the third of the above three methods, the compatibility of the third is better, the method is relatively simple, and the key point is to master the method and principle.

At this point, the study on "how css makes img center vertically" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.