A summary of several methods for vertical and horizontal centering of a box
Show results:
HTML code:
<div id="container">
<div id="box"></div>
</div>
Basic style of css:
#container {
width: 100%;
height: 600px;
border: 1px solid black;
}
#box {
width: 100px;
height: 100px;
background: red;
}
Method 1: Position absolute + negative margin
#container {
width: 100%;
height: 600px;
border: 1px solid black;
position: relative;
}
#box {
width: 100px;
height: 100px;
background: red;
position:absolute;
top: 50%;
left: 50%;
margin-left: -50px; /* 左偏移量取其元素宽度的一半的负值 */
margin-top: -50px; /* 上偏移量取其元素高度的一半的负值 */
}
Explanation: After setting the relative positioning for the parent element, the absolute positioning of the child element is relative to the upper left vertex of the parent element box, so after positioning, we need to move back half the distance of the box.
Method 2: Position absolute + margin auto
#container {
width: 100%;
height: 600px;
border: 1px solid black;
position: relative;
}
#box {
width: 100px;
height: 100px;
background: red;
position:absolute;
top:0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
Method 3: table-cell
#container{
width:600px;
height: 600px;
border: 1px solid black;
display:table-cell;
vertical-align: middle;
text-align: center;
}
#box{
width: 100px;
height: 100px;
background: red;
display: inline-block;
}
Note: You cannot use percentages to set the width and height of the display: table-cell div;
Method 4: Flexible box display: flex
#container{
width:600px;
height: 600px;
border: 1px solid black;
display: flex;
justify-content: center;
align-items: center;
}
#box{
width: 100px;
height: 100px;
background: red;
}
Method five: use transform
#container{
width:600px;
height: 600px;
border: 1px solid black;
position: relative;
}
#box{
width: 100px;
height: 100px;
background: red;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
Method 6: Use calc to calculate
#container{
width:600px;
height: 600px;
border: 1px solid black;
position: relative;
}
#box{
width: 100px;
height: 100px;
background: red;
position: absolute;
top: calc(250px);
left: calc(100%-100px);
}
Note: top = the height of the parent element-the height of the child element, left = the width of the parent element-the width of the child element;
Method Seven: Grid Layout
#container{
width:600px;
height: 600px;
border: 1px solid black;
display:grid;
}
#box{
width: 100px;
height: 100px;
background: red;
align-self: center;
justify-self: center;
}
For more detailed knowledge of grid layout, please refer to teacher Ruan Yifeng's explanation, link: http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html
Method 8: Calculate the spatial distance between the parent box and the child box
#container{
width:600px;
height: 600px;
border: 1px solid black;
}
#box{
width: 100px;
height: 100px;
background: red;
margin-left:250px;
margin-top: 250px;
}
Calculation method: half of the height or width of the parent box minus half of the height or width of the child box. This should be calculated according to the actual width and height set by yourself;
The above are my insights and summaries on several methods of centering a box in a vertical and horizontal position. I won’t go into details about the centering method of text here. If you are interested, please refer to my other blog. Correct.
The setting method of single-line text + multi-line text vertical and horizontal centering: https://blog.csdn.net/qq_43692768/article/details/109412944