What are the methods of absolute positioning and centering of css
This article mainly introduces the relevant knowledge of "what are the methods of css absolute positioning center". The editor shows you the operation process through actual cases, the operation method is simple and fast, and it is practical. I hope this article "what are the methods of css absolute positioning center" can help you solve the problem.
1. The mainstream css with good compatibility is absolutely positioned and centered:
.conter {
Width:600px;height:400px
Position:absolute;left:50%;top:50%
Half of the height of margin-top:-200px;/* * /
Half the width of margin-left:-300px;/* * /
}
Note: 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.
2. With the emergence of css3, a better solution is to use transform to replace the percentage value of translate offset in margin.transform relative to its own size, so that the absolute positioning of css can be centered in this way:
.conter {
Width:600px;height:400px
Position:absolute;left:50%;top:50%
Transform:translate (- 50% won 50%); / * 50% is half of its own size * /
}
3. Margin:auto realizes the center of absolute positioning elements (zero position above and below, left and right; margin:auto)
.conter {
Width:600px;height:400px
Position:absolute;left:0;top:0;right:0;bottom:0
Margin:auto;/* will automatically center with this * /
}
4. Use css3 box model: flex layout to achieve css absolute positioning center. This can be used without considering an earlier version of the browser.
This is the end of the content about "what are the methods of absolute positioning of css". Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.
