This is the 9th day of my participation in the wenwen Challenge
Center is often used in the process of our development, horizontal center, vertical center, width and height fixed, width and height is not fixed, not the same situation, the implementation method is different, this paper mainly on the various cases of the center to do a complete summary.
Horizontal center
The inline and inline – * class
.inline-level-center{
text-align: center;
}
Copy the code
Note: The center class is written on the parent element
<div class="box inline-level-center"> <span> Inline elements are horizontally centered </span> <div>Copy the code
Block-level elements
.block-level-center{
margin: 0 auto;
}
Copy the code
Note: The center type is written on yourself
<div class="box"> <div class="block-box block-level-center"> Block elements horizontally centered </div> <div>Copy the code
Multiple block-level elements
If there are multiple block-level elements, they need to be horizontally and continuously centered
Methods a
Make all block-level elements inline, and center them with inline elements
.inline {
display: inline-block;
}
.inline-level-center {
text-align: center;
}
Copy the code
<div class="box inline-level-center"> <div class="small-box1 inline"> </div> <div class="small-box2 inline"> </div> <div class="small-box3 inline"> box3 </div> </div>Copy the code
Way 2
Use an elastic layout to achieve this
.flex-level-center {
display: flex;
justify-content: center;
}
Copy the code
<div class="box flex-level-center"> <div class="small-box1"> Box 1</div> <div class="small-box2"> Box 2</div> <div Class ="small-box3"> box3 </div> </div>Copy the code
other
If you have multiple block-level elements and want to center them vertically, you can center them with block-level elements
.block-level-center{
margin: 0 auto;
}
Copy the code
<div class="box"> <div class="small-box1 block-level-center"> Box 1</div> <div class="small-box2 <div class="small-box3 block-level-center"> box-3 </div> <div>Copy the code
Vertical center
The inline and inline – * class
A single
If there is only one line and no newline is required, use line-height
.center-single-row {
line-height: 200px;
white-space: nowrap;
}
Copy the code
<div class="box center-single-row"> <span> Inline elements are vertically centered in a single line </span> </div>Copy the code
Note: This method will not work if there is a line break, otherwise it will look like this
Multiple lines
If you want to center multiple rows vertically, you can do this with an elastic layout
.center-multi-row {
display: flex;;
flex-direction: column;
justify-content: center;
}
Copy the code
<div class="box center-multi-row"> <span> Inline elements <br/> vertical </span> </div>Copy the code
Block-level elements
Highly known
Let’s say we have a square with a height of 50px and a padding of 0.
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
height: 50px;
margin-top: -25px;
}
Copy the code
<div class="box parent"> <div class="small-box1 child">Copy the code
If the padding is not 0 and the height of the square is 50px, then box-sizing: border-box should be taken into account.
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
height: 50px;
padding: 20px;
margin-top: -45px;
}
Copy the code
Height of the unknown
This can be handled using the Transform property
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
Copy the code
<div class="box parent"> <div class="small-box1 child">Copy the code
Regardless of the height
You can do this using an elastic layout whether you know the height or not
.flex-vertically-center{
display: flex;
align-items: center;
}
Copy the code
<div class="box flex-center "> <div class="small-box1 child">Copy the code
Horizontal and vertical center
Fixed width high
Absolutely positioned behind 50/50%, use a negative margin equal to half of the width and height (note the padding, to include the padding)
.parent {
position: relative;
}
.child {
background: #99CCFF;
width: 50px;
height: 50px;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
margin: -45px 0 0 -45px;
}
Copy the code
<div class="box parent"> <div class="child">Copy the code
Wide high unknown
Use the transform element
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Copy the code
Flex processing with an elastic layout (no need to worry about width and height)
It can be used regardless of whether the width and height are known
.parent {
display: flex;
justify-content: center;
align-items: center;
}
Copy the code
<div class="small-box1"> box1 </div>Copy the code
Use grid processing (don’t worry about width and height)
It can be used regardless of whether the width and height are known
.parent {
display: grid;
}
.grid-center {
margin: auto;
}
Copy the code
<div class="box parent"> <div class="small-box1 grid-center">Copy the code
Read: Centering in CSS: A Complete Guide
Xiao Ke love to finish click a “like” and then go! 🤞 🤞 🤞