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

This article shows you how to make the DIV horizontal and vertical center, the content is concise and easy to understand, it will definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

Let's start with an effect picture:

HTML Code:

The code is as follows:

CSS:

CSS Code copies content to the clipboard

.main {width: 400px; height: 200px; overflow: hidden; background-color: # ccc; position: absolute;} .yuan {width: 100px; height: 100px; background-color:yellow; border-radius: 50%;-moz-border-radius: 50%;-webkit-border-radius: 50%; position: absolute } # left {top:-50px; left:-50px;} # right {bottombottom:-50px; rightright:-50px; the first method: use negative margin, provided you know the size. The compatibility is the best. Set the horizontal and vertical offset 50% of the parent element, and then move the child element back to half the size according to the actual length. The second method: using the transform of CSS3, the width is variable, and supporting the above content of IE9+ is how to center the DIV horizontally and vertically. Have you learned the knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

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.