Let’s start with an overview:
Method 1: Flex layout
The Flex layout works with inline, inline block, and block elements as child elements, with a wide range of applications.
<style> .wrap{ width: 400px; height: 300px; background-color: lightcoral; display: flex; // Flex code -content: center; align-items: center; } .inner{ width: 40px; height: 50px; background-color: lightblue; } </style> <div class="wrap"> <div class="inner"></div> </div>Copy the codeMethod 2: Absolute + Transform
This method can also be applied to in-line elements, in-line block elements and block elements.
This is because position: absolute; And the float attribute implicitly change the element’s display type (display: None; Except). Just set position: absolute; And one of the float properties, both of which give the element a display: inline-block; In the form of.
<style> .wrap{ width: 400px; height: 300px; background-color: lightcoral; position: relative; } .inner{ background-color: lightblue; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } </style> <div class="wrap"> <span class="inner">Copy the code
Method 3: Absolute + negative margin
This method also applies to cases where the child elements are inline elements, inline block elements, and block elements, and the only requirement is that the height and width of the child elements are known.
<style>
.wrap{
width: 400px;
height: 300px;
background-color: lightcoral;
position: relative;
}
.inner{
background-color: lightblue;
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -40px;
height: 80px;
width: 100px;
}
</style>
<div class="wrap">
<span class="inner"></span>
</div>
Copy the codeMethod 4: Absolute + calc
This method is the same as method three principles. Calc is used to calculate the left and top of elements so as to ensure the horizontal and vertical centering of elements.
This method also applies to cases where the child elements are inline elements, inline block elements, and block elements, and the only requirement is that the height and width of the child elements are known.
<style>
.wrap{
width: 400px;
height: 300px;
background-color: lightcoral;
position: relative;
}
.inner{
background-color: lightblue;
position: absolute;
top: calc(50% - 40px);
left: calc(50% - 50px);
height: 80px;
width: 100px;
}
</style>
<div class="wrap">
<span class="inner"></span>
</div>
Copy the code
Absolute + Margin: Auto
Margin: Auto; margin: Auto; You can center an element horizontally, but not vertically. Why is that? This is related to the nature of block-level elements. If you do not set width for block-level elements, the default width for block-level elements is 100%. The horizontal direction is paved with occupying parent elements. However, if height is not set, block-level elements do not automatically occupy the height of the parent element. That’s the thing about block-level elements, that they can occupy a single row of the parent element, not a single column. When we set the width of the block-level element and margin:auto; In addition to the width of the block element, the remaining space in the horizontal direction is automatically allocated from the margin to the left and right of the parent element, so that the element can be horizontally centered. But in the vertical direction, the block-level element does not automatically expand, its external size does not automatically fill the parent element, and there is no free space to talk about. So margin: Auto cannot be vertically centered.
When we use absolute position absolute; top: 0; bottom: 0; In the vertical direction, the element automatically fills the parent element. Margin: auto; The browser is told to remove the height of the element itself, so that the remaining vertical space margin-top and margin-bottom are both auto, that is, the remaining space is evenly divided, so that the element is vertically centered.
This method also works if the child elements are inline elements, inline block elements, or block elements, with the only requirement that the child elements have height and width. Otherwise, the child element completely fills the parent element.
<style>
.wrap{
width: 400px;
height: 300px;
background-color: lightcoral;
position: relative;
}
.inner{
background-color: lightblue;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
height: 80px;
width: 100px;
margin: auto;
text-align: center;
}
</style>
<div class="wrap">
<span class="inner">absolute + margin:auto</span>
</div>
Copy the codeMethod 6: Use display:table-cell;
Display :table-cell; Give the parent element the characteristics of a TD element. Vertical-align: middle; Center the inline element or inline block element vertically. text-align: center; Center the inline element or inline block element horizontally.
vertical-align: middle; Set the vertical arrangement of the contents of the inline elements themselves (inline), inline block elements themselves (inline-block), or TD elements (table-cell box).
- Inline block elements
<style>
.wrap{
width: 400px;
height: 300px;
background-color: lightcoral;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.inner{
background-color: lightblue;
display: inline-block;
height: 110px;
width: 100px;
}
</style>
<div class="wrap">
<div class="inner">
</div>
</div>
Copy the code
- Inline elements
<style>
.wrap{
width: 400px;
height: 300px;
background-color: lightcoral;
display: table-cell;
vertical-align: middle;
text-align: center;
}
</style>
<div class="wrap">
<span>
display: table-cell;
</span>
</div>
Copy the code
So the display: table – cell; vertical-align: middle; text-align: center; A three-piece set can center inline elements or inline blocks vertically and horizontally.
Method 7: line-height
We know that for elements that are inline, we can set line-height = height; Text-align: center; Achieve horizontal center. This is easy to implement for single-line text whose child elements are inline elements.
<style> .wrap{ width: 400px; height: 300px; line-height: 300px; text-align: center; background-color: lightcoral; } </style> <div class="wrap"> <span>line-height: 300px; I'm an ordinary element of the profession. </span> </div>Copy the code
For inline block elements, use vertical-align as mentioned above.
<style>
.wrap{
width: 400px;
height: 300px;
line-height: 300px;
text-align: center;
background-color: lightcoral;
}
.inner{
height: 200px;
width: 200px;
display: inline-block;
background-color: lightblue;
vertical-align: middle;
font-size: 14px;
line-height: initial;
}
</style>
<div class="wrap">
<div class="inner">display: inline-block;
</div>
</div>
Copy the code
Method 8: The latest method, Grid
Grid compatibility is poor, so it is not popular, so we can look at it in advance.
<style>
.wrap{
display: grid;
justify-items: center;
align-items: center;
width: 400px;
height: 300px;
background-color: lightcoral;
}
.inner{
background-color: lightblue;
height: 110px;
width: 100px;
}
</style>
<div class="wrap">
<div class="inner"></div>
</div>
Copy the codeMethod 9: BFC + margin
If the height and width of the parent elements are fixed, you can use margin-top and margin-left to center the child elements. At the same time, use position: absolute; Make the child element a BFC to resolve the issue of margin Collapsing as a parent element.
<style>
.container{
background-color: silver;
width: 400px;
height: 500px;
}
.content{
width: 200px;
height: 300px;
background-color: red;
margin-top: 100px;
margin-left: 100px;
position: absolute;
}
</style>
<body>
<div class="container">
<div class="content">
</div>
</div>
</body>
Copy the codeThank you
If this article is helpful to you, please feel free to give a thumbs up. It will be my motivation to keep writing
Think and summarize, and never give up trying. One day we can be sparkles, too.