This is the fourth day of my participation in the November Gwen Challenge. Check out the details: The last Gwen Challenge 2021
This article has sorted out a number of horizontal and vertical centralization methods in the web layout. If you have other solutions, please point them out in the comments section and I will add your nickname to the article.
Let’s start with a mind map so you can see it at a glance, and then explain it point by point.
To avoid too much code duplication, the following code structure is the basis for everything in this article, and only the core code will be posted later.
<style>
.container {
width: 600px;
height: 600px;
background: yellow;
}
.content {
width: 200px;
height: 200px;
background: green;
}
</style>
<body>
<div class="container">
<div class="content"></div>
</div>
</body>
Copy the code
Wide high fixed
Horizontal center
1. Relative positioning
Relative positioning will occupy the original document flow, leaving 1/2 of the width of the parent element and 1/2 of its width.
.content {
position: relative;
left: 200px;
}
Copy the code
2. Absolute positioning
The child has no parent phase, left 1/2 the width of the parent element – 1/2 the width of the parent element.
.container {
position: relative;
}
.content {
position: absolute;
left: 200px;
}
Copy the code
3.transform
Using CSS3’s Transform, translateX is 1/2 the width of the parent element and 1/2 the width of its own element.
.content {
width: 200px;
height: 200px;
background: green;
transform: translateX(200px);
}
Copy the code
4.margin
Margin-left 1/2 the width of the parent element – 1/2 the width of the parent element.
.content {
margin-left: 200px;
}
Copy the code
Vertical center
1. Relative positioning
Relative positioning takes up 1/2 of the height of top’s parent and 1/2 of its own height in the original document flow.
.content {
position: relative;
top: 200px;
}
Copy the code
2. Absolute positioning
The child has no parent phase, top is 1/2 of the parent element’s height – 1/2 of its own height.
.container {
position: relative;
}
.content {
position: absolute;
top: 200px;
}
Copy the code
3.transform
Using CSS3’s Transform, translateY is 1/2 the height of the parent element and 1/2 its height.
.content {
width: 200px;
height: 200px;
background: green;
transform: translateY(200px);
}
Copy the code
4.margin
Margin-top is 1/2 the height of the parent element and 1/2 the height of the parent element. Attention should be paid to solving the margin overlap problem.
.container {
overflow: hidden;
}
.content {
margin-top: 200px;
}
Copy the code
Horizontal and vertical center
1. Relative positioning
Relative positioning will occupy the original document flow, left 1/2 the width of the parent element – 1/2 its width, and top 1/2 the height of the parent element – 1/2 its height.
.content {
position: relative;
left: 200px;
top:200px; }Copy the code
2. Absolute positioning
The child has no parent phase, left 1/2 of the width of the parent element – 1/2 of its width, and top 1/2 of the height of the parent element – 1/2 of its height.
.container {
position: relative;
}
.content {
position: absolute;
left: 200px;
top:200px; }Copy the code
3.transform
Using the transform of CSS 3, translateX 1/2 – its width 1/2 of the width of the parent element, translateY 1/2 – half the height of the height of the parent element.
.content {
width: 200px;
height: 200px;
background: green;
transform: translateX(200px) translateY(200px);
}
Copy the code
4.margin
Margin-left 1/2 of the width of the parent element – 1/2 of its own width, margin-top 1/2 of the height of the parent element – 1/2 of its own height, pay attention to solve the margin overlap problem.
.container {
overflow: hidden;
}
.content {
margin-left: 200px;
margin-top: 200px;
}
Copy the code
The width and height are not fixed
Horizontal center
1.margin 0 auto
.content {
margin: 0 auto;
}
Copy the code
2. The flex layout
.container {
display: flex;
justify-content: center;
}
Copy the code
3. The gird layout
.container {
display: grid;
justify-content: center;
}
Copy the code
4. Another GIRD layout
.container {
display: grid
}
.content {
justify-self: center;
}
Copy the code
5. Absolute positioning + margin
.container {
position: relative;
}
.content {
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
}
Copy the code
6. Absolute position + transform
.container {
position: relative;
}
.content {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
Copy the code
7.display: inline-block
.container {
text-align: center;
}
.content {
display: inline-block;
}
Copy the code
8.display: box
.container {
display: -webkit-box;
-webkit-box-pack: center;
}
Copy the code
9. The table layout
.container {
display: table-cell;
text-align: center;
}
.content {
display: inline-block;
}
Copy the code
Vertical center
1. The flex layout
.container {
display: flex;
align-items: center;
}
Copy the code
2. Gird layout
.container {
display: grid;
align-items: center;
}
Copy the code
3. Another GIRD layout
.container {
display: grid
}
.content {
align-self: center;
}
Copy the code
4. Absolute positioning + margin
.container {
position: relative;
}
.content {
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
}
Copy the code
5. Absolute position + transform
.container {
position: relative;
}
.content {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
Copy the code
6.writing-mode + text-align
.container {
writing-mode: vertical-lr;
text-align: center;
}
.content {
display: inline-block;
}
Copy the code
7.writing-mode + margin
.container {
writing-mode: vertical-lr;
}
.content {
margin: auto 0;
}
Copy the code
8.vertical-align + line-height
.container {
line-height: 600px;
}
.content {
display: inline-block;
vertical-align: middle;
}
Copy the code
9.display: box
.container {
display: -webkit-box;
-webkit-box-align: center
}
Copy the code
10. The table layout
.container {
display: table-cell;
vertical-align: middle;
}
.content {
display: inline-block;
}
Copy the code
Horizontal and vertical center
1. The flex layout
.container {
display: flex;
align-items: center;
justify-content: center;
}
Copy the code
2. Gird layout
.container {
display: grid;
align-items: center;
justify-content: center;
}
Copy the code
3. Alternative Grid layout
.container {
display: grid
}
.content {
align-self: center;
justify-self: center;
}
Copy the code
4. Absolute position + transform
.container {
position: relative;
}
.content {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
Copy the code
5. Absolute positioning + margin
.container {
position: relative;
}
.content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
Copy the code
6.flex + margin
.container {
display: flex;
}
.content {
margin: auto;
}
Copy the code
7. Convert to inline elements
Note: The table tag can also be implemented, but it relies on the text-align: center attribute.
.container {
line-height: 600px;
text-align: center;
display: inline-block;
}
.content {
display: inline-block;
vertical-align: middle;
line-height: initial;
}
Copy the code
8. Pseudo elements
.container {
text-align: center;
}
.container::before {
content: ' ';
display: inline-block;
vertical-align: middle;
height: 100%;
}
.content {
display: inline-block;
vertical-align: middle;
}
Copy the code
Note :: : After can also be implemented, but the idea is the same, so it is not listed separately.
9.display:box
This is a precursor to the Flex layout, but it also works.
.container {
display: -webkit-box;
-webkit-box-pack: center;
-webkit-box-align: center
}
Copy the code
10. The table layout
.container {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.content {
display: inline-block;
}
Copy the code
😊 if you have other ideas, please point them out in the comments section
😊 I will add your name to the article along with your proposal ~