The scene where elements are centered horizontally and vertically is very common, and the commonly used methods are as follows:
(The following methods are available in Chorme test)
1. Center the text vertically
<div class="test">这是一段文字</div>
.test {
width: 200px;
height: 200px;
background: orange;
text-align: center; /* 水平居中 */
line-height: 200px; /* 垂直居中 */
}
Renderings:
Second, the element is horizontally and vertically centered
For the convenience of display, the width and height of the parent elements in the following examples are all set, but in our actual scene, many parent elements have uncertain width and height. (Specific scenarios are analyzed in detail)
1. Flexible layoutflex
Flexible layout, this is my most commonly used method, which can satisfy most scenarios.
<div class="wrapper">
<div class="test">元素垂直居中（flex布局）</div>
</div>
.wrapper {
width: 600px;
height: 200px;
border: 1px solid #ccc;
display: flex;
justify-content: center;
align-items: center;
}
.test {
width: 150px;
height: 150px;
background: orange;
}
Effect picture:
The effect pictures of the following methods are the same, so we will not show them one by one.
2. positionPositioning + margin( autoattribute)
If the width and height of the parent element are determined, only horizontal centering is required margin：0 auto.
Combined with positioning here, the offsets in the four directions are all set to 0. To achieve horizontal and vertical centering, just set marginto auto.
.wrapper {
width: 600px;
height: 200px;
border: 1px solid #ccc;
position: relative;
}
.test {
width: 150px;
height: 150px;
background: orange;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
3. positionPositioning+margin
This method also uses positionpositioning + margin, and the difference from the second method is that margin-topthe margin-leftoffset is set here.
This should be understandable, right? leftIt is set 50%to indicate that at the middle point, if it needs to be centered, it needs to move to the left in the horizontal direction 1/2, ie 150*1/2=75. topIt is also the same.
.wrapper {
width: 600px;
height: 200px;
border: 1px solid #ccc;
position: relative;
}
.test {
width: 150px;
height: 150px;
background: orange;
position: absolute;
left:50%;
top:50%;
margin-top: -75px;
margin-left: -75px;
}
4. position positioning
This method is purely based on positioning. The difference from the third method is that the offset is calculated directly when the left value is assigned, and there is no need to set it for adjustment margin.
.wrapper {
width: 600px;
height: 200px;
border: 1px solid #ccc;
position: relative;
}
.test {
width: 150px;
height: 150px;
background: orange;
position: absolute;
left:calc((100% - 150px)/2); /* 如width已知，100%可替换成width */
top:calc((100% - 150px)/2); /* 如height已知，100%可替换成height */
}
5. positionPositioning+transform
transformProperties allow you to rotate, scale, skew or translate a given element.
The method we use is translation. It can be compared with the third method, translatethe realization here is margin-leftsum margin-top.
.wrapper {
width: 600px;
height: 200px;
border: 1px solid #ccc;
position: relative;
}
.test {
width: 150px;
height: 150px;
background: orange;
position: absolute;
left:50%;
top:50%;
transform: translate(-50%, -50%);
}
6. Formtable-cell
One thing to note about this method is:vertical-align: middle
vertical-alignUsed to specify the vertical alignment of inline (inline) or table cell ( ) elements.table-cell
Therefore, it is testset displayhere inline-block, otherwise the vertical centering will not take effect!
.wrapper {
width: 600px;
height: 200px;
border: 1px solid #ccc;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.test {
width: 150px;
height: 150px;
background: orange;
display: inline-block;
}
If there are other ways to add, welcome to leave a message in the comment area!