In the development process, it is inevitable that all kinds of centers, block level, intra row level, fixed height, variable height, vertical, horizontal or horizontal vertical center. We'll sort out the implementation schemes and which scheme should be selected in the development. So that it can be used more conveniently in the future.
horizontally
In line elements are centered horizontally
1. text-align:center
When we want to set a horizontal center for an inline element, we only need to set text align: Center; for its parent element;, Let's look at an example:
<body>
<div class="parent">
<span class="child">1243</span>
</div>
</body>
<style>
.parent {
width: 200px;
height: 200px;
text-align: center;
background-color: aquamarine;
}
</style>
Block level element
Fixed width block level element
2. margin-left,margin-right
We can center a block level element by setting margin left and margin right to auto at the same time. However, this implementation method is based on the premise that the element must be fixed width, that is, it is set with the width attribute. After all, if the width is not set, the child element will fill the parent element, so there is no middle. Let's look at a simple implementation:
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
<style>
.parent {
background-color: bisque;
}
.child {
width: 200px;
height: 200px;
margin: 0 auto;
background-color: brown;
}
</style>
3. Margin left + transform implementation
We can set the left margin of 50% for the child element, and set the transform to move minus 50% in the horizontal direction to set the child element to be centered based on the parent element. In this scheme, if we do not set the width of the child element, the width of the child element will automatically become half of that of the parent element because the left margin of 50% is set. Therefore, you can set the width or not. According to our needs, I think it is more appropriate to set the width of sub elements. Let's look at a simple implementation:
<body>
<div class="parent">
<div class="child">I am a resident neutron element</div>
</div>
</body>
<style>
.parent {
width: 500px;
background-color: bisque;
}
.child {
width: 400px;
margin-left: 50%;
transform: translateX(-50%);
background-color: brown;
}
</style>
4. Absolute positioning + margin left
We can set the absolute positioning of child elements, half the width of margin left. Therefore, we must specify that the child element is fixed width, otherwise we don't know what half of the child element is. Accordingly, we need to set the parent element to relative positioning.
<body>
<div class="parent">
<div class="child">I am a child element in the middle of the horizontal</div>
</div>
</body>
<style>
.parent {
position: relative;
}
.child {
position: absolute;
left: 50%;
width: 200px;
margin-left: -100px;
background-color: brown;
}
</style>
5. Absolute positioning + margin: 0 auto implementation
We can set the absolute positioning of child elements. The left and right positioning distance is 0. Set margin: 0 auto;, However, it should be noted that the relative positioning of the parent element must be set, and the child element must be fixed width, otherwise the child element will fill the parent element without setting the width according to the left and right positioning distance of 0.
<body>
<div class="parent">
<div class="child">I am a child element in the middle of the horizontal</div>
</div>
</body>
<style>
.parent {
position: relative;
}
.child {
position: absolute;
left: 0;
right: 0;
width: 200px;
margin: 0 auto;
background-color: brown;
}
</style>
Variable width block level element
The following implementation scheme has no limit on the width of the child element. You can not set the width, which is completely supported by the internal elements of the child element, and does not affect the layout of the element.
6. Width: fix content implementation
If the child element is set to float and is separated from the document flow, we can set its parent element width: fix content; margin: 0 auto; To center the child elements horizontally. About width: fix content; Yes, you are relatively unfamiliar. You can take a look at this article to get a general understanding: Understanding that the width value in CSS3 is Max / min content and fit content , or https://www.w3cschool.cn/doc_css/css-fit-content.html it's fine too. But we need to pay attention. Fix content is not compatible on IE browser. We can take a look at the specific implementation code:
<body>
<div class="parent">
<div class="child">I am a resident neutron element</div>
</div>
</body>
<style>
.parent {
width: fit-content;
margin: 0 auto;
background-color: bisque;
}
.child {
float: left;
background-color: brown;
}
</style>
7. Absolute positioning + transform
We can set the absolute positioning for the child element, move it to the left by 50%, and then set the child element to move minus 50% in the horizontal direction through transform to achieve the horizontal centering mode. However, it should be noted that the parent element should set relative positioning, because the absolutely positioned element will be positioned and moved relative to the element that is not positioned by default on its ancestor element.
<body>
<div class="parent">
<div class="child">I am a resident neutron element</div>
</div>
</body>
<style>
.parent {
position: relative;
}
.child {
position: absolute;
left: 50%;
transform: translateX(-50%);
background-color: brown;
}
</style>
8. flex implementation
One or more block level elements should be centered in the same line, and using flex is undoubtedly the most convenient implementation. Of course, for the flex implementation centering method, it doesn't care whether it is a block level element or an in-line element, whether it is fixed width or variable width.
<body>
<div class="parent">
<div class="child">I am a child element in the middle of the horizontal</div>
<div class="child">I am a child element in the middle of the horizontal</div>
</div>
</body>
<style>
.parent {
display: flex;
justify-content: center;
}
.child {
background-color: brown;
}
</style>
Vertical center
The implementation scheme of vertical centering can basically be deduced from horizontal centering. Let's have a look.
Inline level elements are centered vertically
Inline element
1. Line height implementation
When we want to set the vertical center for an inline element, we only need to set the line heignt: Center; for its parent element;, Let's look at an example:
<body>
<div class="parent">
<span class="child">I am a child element in the middle of the horizontal</span>
</div>
</body>
<style>
.parent {
height: 200px;
line-height: 200px;
background-color: burlywood;
}
.child {
background-color: brown;
}
</style>
Inline block element
2. Vertical align: middle implementation
We can do vertical centering by setting the child element to the inline block element format and setting vertical align: middle. However, we need a pseudo element of the parent element to set its height to 100%, so that the centerline of the content block is in the middle of the vertical direction of the parent element. About the relationship between vertical align baseline, middle and baseline alignment, we can take a look at this article: How does vertical align work perhaps https://www.cnblogs.com/coolqiyu/p/7292564.html Yes, but it's hard to understand. Then let's look at the implementation scheme:
<body>
<div class="parent">
<span class="child">I am a child element in the middle of the horizontal</span>
</div>
</body>
<style>
.parent {
height: 200px;
background-color: burlywood;
}
.parent::after,
.child {
display: inline-block;
vertical-align: middle;
background-color: brown;
}
.parent::after {
content: '';
height: 100%;
}
</style>
Block level elements are vertically centered
Fixed height
3. Absolute positioning + margin left
<body>
<div class="parent">
<div class="child">I am a child element in the middle of the horizontal</div>
</div>
</body>
<style>
.parent {
position: relative;
height: 200px;
background-color: burlywood;
}
.child {
position: absolute;
top: 50%;
margin-top: -50px;
height: 100px;
background-color: brown;
}
</style>
4. Absolute positioning up and down positioning 0+margin: auto 0 implementation
<body>
<div class="parent">
<div class="child">I am a child element in the middle of the horizontal</div>
</div>
</body>
<style>
.parent {
position: relative;
height: 200px;
background-color: burlywood;
}
.child {
position: absolute;
top: 0;
bottom: 0;
height: 100px;
margin: auto 0;
background-color: brown;
}
</style>
Indefinite height
5. Absolute positioning + transform
If the corresponding level is in the middle, it will not be explained one by one, but directly look at the case:
<body>
<div class="parent">
<div class="child">I am a child element in the middle of the horizontal</div>
</div>
</body>
<style>
.parent {
position: relative;
height: 200px;
background-color: burlywood;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: brown;
}
</style>
6. flex implementation
<body>
<div class="parent">
<div class="child">I am a child element in the middle of the horizontal</div>
</div>
</body>
<style>
.parent {
display: flex;
align-items: center;
height: 200px;
background-color: burlywood;
}
.child {
height: 100px;
background-color: brown;
}
</style>
If you want to achieve horizontal + vertical centering, you can select an appropriate horizontal centering scheme plus a vertical centering scheme. Adaptation means that if flex is used for horizontal centering, it is better to use flex for vertical centering.