CSS positioning "cross" horizontal and vertical center
This article introduces the knowledge about "CSS positioning" cross "horizontal and vertical centering". In the actual case operation process, many people will encounter such difficulties. Next, let Xiaobian lead you to learn how to deal with these situations! I hope you can read carefully and learn something!
1. Let's look at the effect we want to achieve.
Actual renderings
You can see that my implementation process is to first use a parent div to locate horizontal and vertical centers, and then locate two crosses in the parent div.
Look at the implementation code:
XML/HTML Code Copy content to clipboard
body{margin:0;padding:0}
/* Position Parent div Horizontal Vertical Center */
.body_main{
width:200px;
height: 300px;
background-color: #3091E5;
margin:-150px 0 0 -100px;
top:50%;
left:50%;
position: absolute;
}
/* Position Horizontal div Vertical Center */
.row_div{
width:200px;
height: 50px;
background-color:#88E500;
position: absolute;
top:50%;
margin:-25px 0 0 0;
}
/* Location Column div Horizontal Center */
.clou_div{
width:50px;
height: 300px;
background-color: #3c510c;
left:50%;
position: absolute;
margin:0 0 0 -25px;
}
Horizontal div
vertical div
The default width of div is 100%. When div is absolutely positioned, its width is the width of the content in div.
Summary:
Absolute positioning in css is relative to the most recently positioned ancestor element, and if the element has no positioned ancestor element, the position is relative to the initial containing block.
"CSS positioning" cross "horizontal vertical center" content is introduced here, thank you for reading. If you want to know more about industry-related knowledge, you can pay attention to the website. Xiaobian will output more high-quality practical articles for everyone!
