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

This article mainly introduces how to use absolute positioning to achieve vertical center in web, which has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, let the editor take you to understand it.

HTML Code:

CSS Code:

Body {bac kilogram round: # ccc;} .posdiv {width: 300pxpositiveheight: 250pxpolitical background: # fff;position: relative; margin:0 auto} .posdiv img {width: 100pxposiposition: absolute;top: 50% edge top:-50px;}

Interpretation:

1. For an img picture wrapped in div, we not only give the size to the picture and the div element boundary, but also give the div element boundary the layout of # fff (scenery or equipment as required).

2. Add relative positioning attributes (position: relative) to the parent element of the img, and absolute positioning attributes (position: absolute) to the child elements that are also equal to the picture img elements.

3. Set the top attribute of the picture element to 50%.

4. At that time, we need to set a negative margin-top value for the img element, which is half the height of the element you want to center vertically. * if you are not destined for the height of the element, you may not use margin-top, but apply the transform:translateY (- 50%) attribute.

Remember: if you want to center your level at the same time, you may do it with the same ability to center vertically.

Thank you for reading this article carefully. I hope the article "how to achieve Vertical centering with absolute Positioning in web" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

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.