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

This article will introduce in detail for you "how to use CSS to achieve positioning elements center", the content steps are clear and detailed, the details are handled properly, and the editor will update different knowledge points every day, hope that this article "how to use CSS to achieve positioning elements centring" can give you unexpected gains, please follow the editor's ideas slowly in depth, the specific contents are as follows, to harvest new knowledge.

Centring implementation of absolute positioning elements

If you want to ask how CSS can achieve the centring effect of absolute positioning elements, many people already have the answer in mind.

The mainstream usage of good compatibility is:

.element {

Width: 600px; height: 400px

Position: absolute; left: 50%; top: 50%

Margin-top:-200px; / * half height * /

Margin-left:-300px; / * half width * /

}

However, one obvious drawback of this approach is that you need to know the size of the element in advance. Otherwise, the adjustment of negative margin values cannot be accurate. At this point, it is often obtained with the help of JS.

With the rise of CSS3, a better solution is to use transform instead of margin. The percentage value of translate offset in transform is relative to its own size, so we can:

.element {

Width: 600px; height: 400px

Position: absolute; left: 50%; top: 50%

Transform: translate (- 50%,-50%); / * 50% is half of its own size * /

}

Therefore, regardless of the size of the absolute positioning element, it is displayed horizontally and vertically.

However, the problem is obvious, compatibility is not good. IE10+ and other modern browsers support it. It is somewhat inappropriate for China's popular IE8 browser to be ignored (mobile web development can be ignored).

In fact, there is another way to realize the centring of absolute positioning elements, which can be said to be a scheme that weighs the above size adaptation and compatibility, and the core of its implementation is margin:auto.

Margin:auto realizes the centring of absolute positioning elements

First, let's take a look at the CSS code:

.element {

Width: 600px; height: 400px

Position: absolute; left: 0; top: 0; rightright: 0; bottombottom: 0

Margin: auto; / * automatically centered with this * /

}

There are two keys to the code:

Zero position up and down, left and right

Margin: auto

So, it's in the middle. The width: 600px height: 400px of the above code is just a hint, and you change it to another size, or do not set the size (need to be an element of the size itself, such as a picture), are centered. It's very interesting.

What is csscss is a computer language used to express file styles such as HTML or XML. It is mainly used to design the style of the web page and make the web page more beautiful. It is also a language that defines style structures such as fonts, colors, locations, etc., and css styles can be stored directly in HTML pages or separate style sheet files, while the priority of style rules is determined by css according to this hierarchical structure, so as to achieve cascading effect. Up to now, css can not only decorate the web page, but also cooperate with various scripts to format the web page.

Thank you for reading this. I hope you have the most profound experience from the practical level on the key issue of "how to use CSS to achieve the center of positioning elements". The specific use also requires everyone to practice and use it in order to understand it. If you want to read more related articles, 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.