Jane said
CSS centralization is a common problem faced by front-end engineers and is one of the basic skills. Today, I have time to compile the CSS center program, including horizontal center, vertical center and horizontal vertical center program a total of 15. If have omission, still can in succession complement come in, calculate to do is a memorandum.
1 horizontal center
1.1 Inline elements are horizontally centered
Use text-align: center to center inline elements horizontally inside block-level elements. This method works for inline elements, inline-block, inline-table, and inline-flex elements centered horizontally.
** Core code: **
.center-text {
text-align: center;
}
Copy the code** demo: **
Demo code
1.2 Block level elements are horizontally centered
Block-level elements are horizontally centered by setting margin-left and margin-right of block-level elements of fixed width to auto.
** Core code: **
.center-block {
margin: 0 auto;
}
Copy the code** demo: **
Demo code
1.3 Multiple block-level elements are horizontally centered
1.3.1 USESinline-block
If there are two or more block-level elements in a row, center multiple block-level elements horizontally by setting the display type of the block-level element to inline-block and the parent container’s text-align attribute.
** Core code: **
.container {
text-align: center;
}
.inline-block {
display: inline-block;
}
Copy the code** demo: **
Demo code
1.3.2 usingdisplay: flex
Horizontally centered using flex, where precision-content is used to set the alignment of the elastic box elements along the main axis (horizontal axis), in this case to set the child elements horizontally centered.
** Core code: **
.flex-center {
display: flex;
justify-content: center;
}
Copy the code** demo: **
Demo code
2 vertically centered
2.1 Single line inlining (inline-) the element is vertically centered
Center an inline element vertically by setting its height to be equal to its line-height.
** Core code: **
#v-box {
height: 120px;
line-height: 120px;
}
Copy the code** demo: **
Demo code
2.2 Multi-row elements are vertically centered
2.2.1 Using table Layout (table)
Use vertical-align: middle to center child elements vertically.
** Core code: **
.center-table {
display: table;
}
.v-cell {
display: table-cell;
vertical-align: middle;
}
Copy the code** demo: **
Demo code
2.2.2 Using Flex Layout (flex)
Vertically centered using flex layout, where Flex-direction: column defines the main axis as vertical. Because the Flex layout is defined in CSS3, there are compatibility issues with older browsers.
** Core code: **
.center-flex {
display: flex;
flex-direction: column;
justify-content: center;
}
Copy the code** demo: **
Demo code
2.2.3 Using Sprite Elements
Use “Ghost Element” technique to achieve vertical centering, that is, placing a 100% height pseudo-element in the parent container so that the text is aligned vertically with the pseudo-element to achieve vertical centering.
** Core code: **
.ghost-center {
position: relative;
}
.ghost-center::before {
content: "";
display: inline-block;
height: 100%;
width: 1%;
vertical-align: middle;
}
.ghost-center p {
display: inline-block;
vertical-align: middle;
width: 20rem;
}
Copy the code** demo: **
Demo code
2.3 Block level elements are vertically centered
2.3.1 Block-level elements of fixed height
We know the height and width of the centering element, so vertical centering is easy. Vertical centering is achieved by absolutely positioning the element 50% from the top and setting margin-top to offset the element’s height upwards by half.
** Core code: **
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px;
}
Copy the code** demo: **
Demo code
2.3.2 Block-level elements of unknown height
When the height and width of the vertically centered element are unknown, we can realize the vertically centered element by reversing the transform attribute in CSS3 by 50% to the Y-axis. However, some browsers have compatibility issues.
** Core code: **
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(50%); }Copy the code** demo: **
Demo code
3 Horizontal and vertical center
3.1 Fixed width and height elements are horizontally and vertically centered
Center the element horizontally and vertically by shifting it by half the overall width of the margin.
** Core code: **
.parent {
position: relative;
}
.child {
width: 300px;
height: 100px;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
margin: -70px 0 0 -170px;
}
Copy the code** demo: **
Demo code
3.2 Unknown width and height elements are horizontally and vertically centered
Using a 2D transform, the element is centered horizontally and vertically by translating half the width and height backwards in both horizontal and vertical directions.
** Core code: **
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(50%, 50%); }Copy the code** demo: **
Demo code
3.3 Layout with Flex
Flex layout, where context-content is used to set or retrieve the alignment of elastic box elements along the main (horizontal) axis; The align-items property defines the alignment of flex child items along the lateral (vertical) direction of the current row in the Flex container.
** Core code: **
.parent {
display: flex;
justify-content: center;
align-items: center;
}
Copy the code** demo: **
Demo code
3.4 Use grid layout
Using grid to achieve horizontal and vertical center, poor compatibility, not recommended.
** Core code: **
.parent {
height: 140px;
display: grid;
}
.child {
margin: auto;
}
Copy the code** demo: **
Demo code
3.5 Center the screen horizontally and vertically
Horizontal and vertical centers are very common on the screen, and are used for both regular login and registration pages. Table layouts are also needed to ensure good compatibility.
** Core code: **
.outer {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
}
.inner {
margin-left: auto;
margin-right: auto;
width: 400px;
}
Copy the code** demo: **
Demo code
4 demonstrates
The text and code parts are compiled on the network. Due to the lack of time, limited ability and other reasons, there are many problems such as inaccurate text description and insufficient code testing. Therefore, it is limited to the scope of learning and not applicable to practical application.
The scheme described in this paper is only a part of the middle scheme, not all of it. In addition, flex, Transform, grid and other contents related to CSS3 have compatibility problems.
5 References
Centering in CSS: A Complete Guide
w3.org centering things
How To Center Anything With CSS
How do I center DIV horizontally and vertically on the screen?