This is a summary of the center alignment
Before starting, let me ask you how many ways to implement centering?
It is good to answer two or three during the interview, but I am afraid that the interviewer will let you continue. Today, let’s summarize these methods of centering
- Centered using flex layout settings.
- When using flex, you can also set margin: auto for the child to achieve centering.
- Use absolute positioning to achieve horizontal and vertical centering.
- Use the grid setting to center.
- When using the grid, you can also set margin: auto for the child to achieve centering.
- Use tabel-cell to achieve vertical centering.
- There is also a less common way to achieve vertical centering.
- Finally, there is a weird method. The container sets position: relative. The child sets top, left, bottom, and right to 0
1. The flex layout is centered
One common way is to use flexlayout settings to center.
Use elastic layout ( flex) to achieve horizontal centering, where is justify-contentused to set the alignment of elastic box elements in the main axis (horizontal axis) direction
Set the container to:
-
display: flex;Written on the parent element, this defines a flexible container -
justify-contentMain axis alignment, the default is the horizontal axis -
align-itemsVertical axis alignment, the default is the vertical axis
Advantages: Simple, convenient, fast, three lines of code.
<div class="box">
<div class="child">水平垂直居中</div>
</div>
<style>
.box {
width: 200px;
height: 200px;
border: 1px solid;
display: flex;
align-items: center; // 纵轴对齐方式，默认是纵轴 子元素垂直居中
justify-content: center; //纵轴对齐方式，默认是纵轴
}
.child {
background: red;
}
</style>
2.flex-settings for sub-items
The first way is to set attributes for the parent box, and this one is to set the child box margin: autoto achieve centering. display: flex;Set the subitem settings for the containermargin: auto;
<div class="box">
<div class="child">水平垂直居中</div>
</div>
<style>
.box {
width: 200px;
height: 200px;
border: 1px solid;
display: flex;
}
.child {
background: red;
margin: auto; // 水平垂直居中
}
</style>
3. Absolute positioning
Use absolute positioning to achieve horizontal and vertical centering. Container settings position: relative. child element settings position: absolute; left: 50%; ; top: 50%;transfrom: translate(-50%, -50%)
The advantage is that you don't need to care about the length and width of the child elements, but the compatibility of this method depends on the compatibility of translate2d
<div class="box">
<div class="child">水平垂直居中</div>
</div>
<style>
.box {
width: 200px;
height: 200px;
border: 1px solid;
position: relative;
}
.child {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: red;
}
</style>
4. Tabel-cell achieves vertical centering
The newly added table attribute of css allows us to turn ordinary elements into realistic effects of table elements. Through this feature, horizontal and vertical centering can also be achieved
And the content in the tabel cell is naturally centered vertically, just add a horizontal center attribute
-
Use tabel-cell to achieve vertical centering and container settings
display: table-cell;; -
vertical-align: middleProperty sets the vertical alignment of an element -
If the child element is a block-level element, use left and right
margin:autoto achieve horizontal centering. If it is an inline element, set the containertext-align: center
text-align: centerHorizontal centering of inline elements inside block-level elements can be achieved with . This method is valid for inline elements inline, inline blocks inline-block, inline tables inline-table, and inline-flexhorizontal centering of elements.
<div class="box">
<div class="child">水平垂直居中</div>
</div>
<style>
.box {
width: 200px;
height: 200px;
border: 1px solid;
display: table-cell;
vertical-align: middle; // 设置元素在垂直方向上的对齐方式
text-align: center;
}
.child {
background: red;
display: inline-block;
}
</style>
5. The grid is centered
- Use the grid setting to center. Set the container
display: grid;align-items: center;justify-content: center;
By setting attributes for the container, the centering effect can be achieved, but this method has poor compatibility and is not recommended.
<div class="box">
<div class="child">水平垂直居中</div>
</div>
<style>
.box {
width: 200px;
height: 200px;
border: 1px solid;
display: grid;
align-items: center;
justify-content: center;
}
.child {
background: red;
}
</style>
6. Grid sets the subitem
margin: auto;When using the grid, it can also be centered by setting the subitems . display: grid;Set the subitem settings for the containermargin: auto;
Some browsers do not support the grid layout method, which has poor compatibility and is not recommended.
<div class="box">
<div class="child">水平垂直居中</div>
</div>
<style>
.box {
width: 200px;
height: 200px;
border: 1px solid;
display: grid;
}
.child {
background: red;
margin: auto;
}
</style>
7. Add pseudo elements to the container
This is an uncommon way to achieve vertical centering. Add a pseudo-element to the container , set line-heightequal to the height of the container. set for the child display: inline-block;
<div class="box">
<div class="child">水平垂直居中</div>
</div>
<style>
.box {
width: 200px;
height: 200px;
border: 1px solid;
text-align: center;
}
.box::after {
content: "";
line-height: 200px;
}
.child {
display: inline-block;
background: red;
}
</style>
8. There is another wonderful method
This wonderful way is similar to the third way to use absolute positioning, except that you need to set the child element position: absolute; set a fixed width and height; top、left、bottom、rightboth are set to 0; margin is set to auto; it can also achieve vertical and horizontal centering.
<div class="box">
<div class="child">水平垂直居中</div>
</div>
<style>
.box {
width: 200px;
height: 200px;
border: 1px solid;
position: relative;
}
.child {
background: red;
width: 100px;
height: 40px;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
</style>
The above are some of our commonly used vertical centering schemes.