Page center, various elements center is our development is very common situation, the following to discuss the horizontal center, vertical center and horizontal plus vertical center have what common programs. Our goal is to align the following two divs:
<div class="parent">
<div class="child">
DEMO
</div>
</div>
Copy the code
To make it clear, we give the parent a light grey background and the child a dark grey background. At first we write nothing like this, and the child will fill the parent by default:
Horizontal center
text-align + inline-block
.parent{/* text-align will apply to inline children, set to center and align horizontally */ text-align: center; }. Child {/* display is set to inline-block, the child does not fill the parent, but ADAPTS to the content */ display: inline-block; /* text-align: left; /* text-align: left; }Copy the code
table + margin
Parent2 {}. Child2 {/* display set to table, if the width is not specified, the width is adaptive content */ display: table; /* display table */ * Display table */ margin: 0 auto; } /* If you know the child width, you can directly apply margin auto */Copy the code
The above method is suitable for cases where the width of the parent element is not fixed and the width of the child element is not fixed. If you know the width of the child element, it’s easy to apply margin Auto:
.parent2 {
}
.child2 {
width: 100px;
margin: 0 auto;
}
Copy the code
absolute + transform
Parent4 {/* The parent set relative to absolute */ position: relative; } .child4 { position: absolute; /* left: 50%; /* left: 50%; */ transform: translateX(-50%) */ transform: translateX(-50%); }Copy the code
flex + justify-content
This is probably the easiest way to do this, just define context-Content center at the parent level.
.parent5 {
display: flex;
justify-content: center;
}
.child5 {
}
Copy the code
flex + margin
The Flex element also supports Margin Auto, so you can write it this way
.parent51 {
display: flex;
}
.child51 {
margin: 0 auto;
}
Copy the code
Vertical center
table-cell + vertical-align
Vertical-align takes effect in the table-cell, so set the table-cell to the parent, and then set vertical-align to middle.
.parent6 {
display: table-cell;
vertical-align: middle;
}
.child6 {
}
Copy the code
absolute + transform
Similar to horizontal center, the parent is set to relative, the child is set to absolute, and the top is set to 50%. This will make the position slightly lower. Use transform to move it up a bit.
.parent7 { position: relative; } .child7 { position: absolute; top: 50%; /* translateY % is also calculated relative to the element itself */ transform: translateY(-50%); }Copy the code
flex + align-items
This should be the simplest, set flex and align-items: center directly in the parent;
.parent8 {
display: flex;
align-items: center;
}
.child8 {
}
Copy the code
Horizontal and vertical center
Horizontal and vertical center directly in front of the horizontal center and vertical center together on the line.
text-align + inline-block + table-cell + vertical-align
.parent9 {
text-align: center;
display: table-cell;
vertical-align: middle;
}
.child9 {
display: inline-block;
}
Copy the code
absolute + transform
The absoluate + Transform solution is used to center the center vertically and horizontally.
.parent10 {
position: relative;
}
.child10 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Copy the code
flex
Here we go again with our favorite Flex, don’t be too easy to center!
.parent11 {
display: flex;
justify-content: center;
align-items: center;
}
.child11 {
}
Copy the code
Sample code:
Github.com/dennis-jian…
At the end of this article, thank you for your precious time to read this article. If this article gives you a little help or inspiration, please do not spare your thumbs up and GitHub stars. Your support is the motivation of the author’s continuous creation.
Welcome to follow my public numberThe big front end of the attackThe first time to obtain high quality original ~
“Front-end Advanced Knowledge” series:Juejin. Im/post / 5 e3ffc…
“Front-end advanced knowledge” series article source code GitHub address:Github.com/dennis-jian…