In addition to Weibo, there is also WeChat
Please pay attention
WeChat public account
Shulou
2025-04-02 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >
Share
Shulou(Shulou.com)06/01 Report--
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.
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.
Views: 0
*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.
Continue with the installation of the previous hadoop.First, install zookooper1. Decompress zookoope
"Every 5-10 years, there's a rare product, a really special, very unusual product that's the most un
© 2024 shulou.com SLNews company. All rights reserved.