5 books at the end of the article
horizontal center
Inline elements
To make inline elements (such as links, span or img< /code>), using text-align: center is enough.
<div class='desk'>
<span class='plate' ></span>
</div>
.desk {
text-align : center;
}
For multiple inline elements, you can also use text-align: center:
<div class='desk'>
<span class='plate' ></span>
<span class='plate'></span>
</div>
.desk {
text-align: center;
}
Flexbox
Using flexbox can also quickly center elements :
.desk {
display: flex;
justify-content: center;
}
CSS Grid
When using the grid container, The plates in the figure will be centered according to their grid area. Note that this won't work for multiple plates unless you wrap them in an element.
.desk {
display: grid;
justify-content: center;
}
block element
Auto Margin
Block elements with known width and height can be set by setting margin-left:auto and margin-right:auto Centers the element.
.plate {
width: 120px;
height: 120px;
margin-left: auto;
margin-right: auto;
}
For multiple block elements, they should be wrapped in one element, and then let this parent element be centered.
.tray {
display: flex;
margin-left: auto;
margin-right: auto;
}
Flexbox
For flexbox also use justify-content:center to center the element:
.desk {
display: flex;
justify-content: center;
}
For multiple elements, we don't need to wrap them in one element, flexbox can center them all.
CSS positioning
By absolute positioning, we can Easily center it horizontally with CSS transform.
.plate {
position: absolute;
left: 50%;
transform: translateX(-50%);
}< br>
In the case of known element width, you can use negative margin instead of CSS transform.
.plate {
position: absolute;
left: 50%;
margin-left: -60px;
}
Vertical center
Inline element
Vertical Padding
One of the easiest ways to vertically center elements is to use padding:
padding-top: 24px;
padding-bottom: 24px;
}
Vertical Align
vertical-align attribute can be used on one or more elements.
In this example, the fork and knife should be vertically centered on the table.
.desk {
text-align: center;
}
.plate,
.fork,
. knife {
vertical-align: middle;
}
Flexbox< /span>
To align plates, forks and knives we can use flexbox:
.desk {
display: flex;
justify-content: center;
align-items: center;
}
block element
Absolute positioning
By absolutely positioning an element, you can use CSS transform to vertically center the element:
.plate {
position: absolute;
top: 50%;
transform: translateY(-50%);
}< br>
If you know the element height, you can use negative margins instead of transform.
.plate {
position: absolute;
top: 50%;
margin-top: -60px;
}
CSS Grid
Using CSS Grid, we can use align-items to center items vertically to their grid area.
.desk {
display: grid;
align-items: center;
}
Horizontal and vertical center
Inline elements
Padding and Text Align
.plate {
text-align: center;
padding-top: 24px;
padding-bottom: 24px;
}< br>Other element types
absolute positioning
.plate {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
Flexbox
by justify-content :center and align-items:center can center the element vertically and horizontally:
.plate {
display: flex;
justify-content: center;
align-items: center;
}
CSS Grid
It can be passed through the place-items attribute, which combines justify-content and align-items:
.desk {
display: grid;
place-items: center;
}
Author: Ahmad Shadeed Translator: Frontend Xiaozhi Source: ishadeed Original text: https://ishadeed.com/article/learn- css-centering/
Free shipping
"The Definitive Guide to HTML 5 and CSS 3 (4th Edition · Volume 2)"
This book is one of the recognized benchmarks in the field of HTML 5 and CSS 3 It is praised by readers as "the standard work for systematically learning HTML 5 and CSS 3", and it is also a must-have workbook for Web front-end engineers. The first volume of this book explains HTML 5 technology, and the second volume comprehensively and systematically explains the main technologies related to CSS 3, starting with the functions and module structure of CSS 3, in order Covers various selectors, text and fonts, box-related styles, backgrounds and borders, transformations, animation, layout, multimedia, and some other important styles in CSS 3.
Welfare time
Finally, I will send you Welfare, how can such a good book not be given to everyone?
A variety of ways have been prepared for the lottery this time, "by luck, comment, watching" these three ways can participate! Thank you dear readers, your support is also the biggest motivation for me to continue to update the article.
In order to avoid losing contact after winning the lottery, please add me on WeChat in advance
Lucky draw (3 copies)
Participation method: first scan the QR code to add Xiaoli’s WeChat (above)
Reply password 666 Get the code of the mini program lottery, scan the code to participate
Drawing time: Wednesday (10/14) at 12:00 noon
Message lottery (1 book)
Grand Prize: "First place" in the number of comments and likes will get a copy of
HTML5 and CSS3 Definitive Guide (4th Edition · Volume 2)Participation award: Randomly select "2" high-quality comments to give out "10 yuan" red envelopes.
Looking at the lottery (1 copy)
Remember to add my WeChat first, Otherwise, I can't see which friends click to watch
Grand Prize: Randomly draw "1" reading classmate and send a copy
HTML5 and CSS3 The Definitive Guide (4th Edition · Volume 2)Participation award: Randomly draw "2 people" who are watching and send "20 yuan" red envelopes.
Articles are uploaded by users and are for non-commercial browsing only. Posted by: Lomu, please indicate the source: https://www.daogebangong.com/en/articles/detail/Multiple%20CSS%20centering%20schemes%20that%20you%20dont%20know.html
支付宝扫一扫 
评论列表（196条）
测试