How to use margin to realize horizontal and Vertical centering in CSS
This article mainly introduces the relevant knowledge of "how to use margin to achieve horizontal and vertical centering in CSS". Xiaobian shows you the operation process through actual cases. The operation method is simple, fast and practical. I hope this article "how to use margin to achieve horizontal and vertical centering in CSS" can help you solve the problem.
1.1. Use margin: auto (offset is 0)
Set the top, left, right, bottom of the child element to 0, and then set its margin to auto.
Add Style:
.box { position: relative; }
.inner {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
1.2. Using translation
First set the top and left of the child element to 50%, that is, half the width and height of the parent element, and then use translate to go back half of its width and height.
Add Style:
.box { position: relative; }
.inner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
About "CSS how to use margin to achieve horizontal and vertical centering" content introduced here, thank you for reading. If you want to know more about industry-related knowledge, you can pay attention to the industry information channel. Xiaobian will update different knowledge points for you every day.
