In the front-end development, there are many ways to realize the centering of the layout container through CSS. Of course, it is also a classic interview question in the CSS interview question. In this article, a systematic analysis and summary will be realized through the Flexbox layout module and the CSS Grid layout module. Centering effect.
In the traditional solution, based on the box model, relying on the display attribute + position attribute + float attribute to achieve the basic layout, including the centered arrangement of this article.
| ** | You may need |
|---|---|
| CSDN | NetEase Cloud Classroom Tutorial |
| Nuggets | EDU Academy Tutorial |
| Know almost | Flutter series articles |
| Headline sync | Baidu Sync |
This article was first published on the WeChat public account (biglead) My big front-end career, and it was published simultaneously in various technical forums.
1 Horizontal and vertical centering in Flexbox
1.1 Brief description of Flexible Box
In 2009, W3C proposed the Flex layout scheme. Flex is the abbreviation of Flexible Box, which can mean "flexible layout". Any container can be designated as Flex layout, which can be used to provide maximum flexibility for the box model.
The elements using Flex layout are called Flex container (flex container), hereafter called Flexbox, and all child elements in the Flex container are called Flex items (flex item).
Any container can be designated as a Flex layout, as shown below:
.box{
display: flex;
}
or it could be
.box{
display: inline-flex;
}
Click here to see the difference between flex and inline-flex in CSS
Flexbox has two axes by default: the horizontal main axis and the vertical cross axis. The start position of the main axis (the intersection with the frame) is called main start, and the end position is called main end; the start position of the cross axis is called cross start, and the end position is called cross end, as shown in the following figure:
1.2 Center alignment of sub-items in Flexible Box
In the Flexbox layout module, align its sub-Item (flex item) in the center (the horizontal and vertical directions are all centered), as shown in Figure 1-1 below:
1.2.1 Implementation mode: Set the properties of the Flex container
As shown in Figure 1-1, you only need to set the value of justify-content and align-items to center on the Flex container, so that the elements can be centered horizontally and vertically in the Flex container, as shown in Listing 1- 2 shows:
/*代码清单1-2*/
<div class="flex__container">
<div class="flex__item"></div>
</div>
/*Flex 容器*/
.flex__container {
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 300px;
background-color: gray;
}
/*Flex 子 Item */
.flex__item {
width: 100px;
height: 100px;
background-color: aqua;
}
justify-content is used to set horizontal centering, as shown in Figure 1-3:
align-items is used to restrict vertical centering, as shown in Figure 1-4:
As shown in Figure 1-2 below, increase the number of sub-Items in the Flex container to 4, and the centering effect of this method is still effective.
The corresponding code in Figure 1-2 is as follows:
/*代码清单1-3*/
<div class="flex__container">
<div class="flex__item"></div>
<div class="flex__item"></div>
<div class="flex__item"></div>
<div class="flex__item"></div>
</div>
/*Flex 容器*/
.flex__container {
display: flex;
justify-content: center;
align-items: center;
/*flex-direction: column;*/
/*display: inline-flex;*/
width: 300px;
height: 300px;
background-color: gray;
}
/*Flex 子 Item */
.flex__item {
width: 50px;
height: 50px;
margin-left: 10px;
margin-top: 10px;
background-color: aqua;
}
1.2.2 Implementation Method Two Set the properties of the Flex container and its sub-Item at the same time
/*Flex 容器*/
.flex__container {
display: flex;
justify-content: center;
}
/*Flex 子 Item */
.flex__item {
align-self: center;
}
The corresponding Html level code is as follows:
<div class="flex__container">
<div class="flex__item"></div>
<div class="flex__item"></div>
</div>
1.2.3 Sub-Item setting margin: auto in Flex container
If there is only one child Item in the Flex container, you can explicitly set the value of margin in the Item to auto, or you can achieve the horizontal and vertical centering effect, as shown in Figure 1-5:
2 Achieve horizontal and vertical centering in Grid layout
The Grid layout in Css can be called CSS Grid Layout Module, which is a new module added by CSS for layout. It is simply understood as Grid layout, which is a network layout. Any container can be designated as Grid layout, as shown below:
.box{
/*或者 inline-grid */
display: grid;
}
In the Grid layout, to achieve the vertical and horizontal centering effect of its sub-Items, you can directly configure place-items as center, as shown in Figure 1-6:
/*Grid 容器*/
.flex__container {
/*或者 inline-grid */
display: grid;
place-items: center;
}
complete
