CSS centering is the problem that front-end engineers often have to face, but also one of the basic skills. Today there is time to arrange the CSS center, currently including horizontal center, vertical center and horizontal vertical Center scheme total 15 kinds. If there are missing, will be added in succession, is to do is a memo it.
1 Horizontal Center 1.1 inline element horizontally centered
The use text-align: center
of inline elements that can be implemented inside a block-level element is horizontally centered. This method is valid for inline inline
elements (), inline blocks inline-block
(), inline tables ( inline-table
), inline-flex
and elements that are centered horizontally.
Core code:
1{2 text-align: Center; 3 }
Demo Program:
Demo Code
1.2 Block-level elements are centered horizontally
by margin-right
Setting the fixed-width block- margin-left
level element to Auto, the block-level element can be centered horizontally.
Core code:
1{2 margin: 0 auto; 3 }
Demo Program:
Demo Code
1.3 Multi-block element horizontal Center 1.3.1 Utilization
inline-block
If there are two or more block-level elements in a row, the multi-level element is centered horizontally by inline-block
Setting the display type text-align
of the block-level element and the property of the parent container.
Core code:
1{2 text-align: Center; 3 }4{5 display: inline-block; 6 }
Demo Program:
Demo Code
1.3.2 Use
display: flex
The Elastic layout ( flex
)is used to center horizontally, justify-content
which sets the alignment of the elastic box elements in the direction of the spindle (horizontal axis), in this case the child elements are centered horizontally.
Core code:
1{2 display: flex; 3 justify-content: Center; 4 }
Demo Program:
Demo Code
2 Center vertically 2.1 single-line inline (
inline-
) element is centered vertically
Centers the elements vertically by setting the height height
() and line height line-height
() of the inline elements equal.
Core code:
1{2 height: 120px; 3 line-height: 120px; 4 }
Demo Program:
Demo Code
2.2 Multiline elements vertically centered 2.2.1 using table layouts (
table
)
A vertical-align: middle
table layout can be used to achieve the vertical centering of child elements.
Core code:
1{2 display: table; 3 }4{5 display: table-cell; 6 vertical-align: Middle; 7 }
Demo Program:
Demo Code
2.2.2 Leverages flex layouts (
flex
)
Use the Flex layout to center vertically, flex-direction: column
where the spindle orientation is defined vertically. Because the flex layout is defined in CSS3, there are compatibility issues with older browsers.
Core code:
1{2 display: flex; 3 flex-direction: column; 4 justify-content: Center; 5 }
Demo Program:
Demo Code
2.2.3 using "Sprite elements"
Use the Ghost element technique to center vertically, which is to place a 100%-height pseudo-element within the parent container, allowing the text to be vertically aligned with the pseudo-elements , thus achieving vertical centering.
Core code:
1 . Ghost-center{2 position:relative;3}4 . Ghost-center::before{5 content: " ";6 Display:Inline-block;7 Height:100%;8 width:1%;9 vertical-align:Middle;Ten} One . Ghost-center P{ A Display:Inline-block; - vertical-align:Middle; - width:20rem; the}
Program:
Demo Code
Block-level elements with 2.3 block-level elements vertically centered 2.3.1 Fixed heights
We know the height and width of the center element, and the vertical centering problem is simple. Vertical centering can be achieved by absolutely locating the element distance margin-top
from the top 50% and setting the half of the height of the offset element upward.
Core code:
1{2 position: relative; 3 }4{5 position: absolute; 6 top: 50%; 7 height: 100px; 8 margin-top: -50px9 }
Demo Program:
Demo Code
2.3.2 Block-level elements with unknown heights
When the height and width of the vertically centered element is unknown, we can use the transform
property in CSS3 to invert the y-axis by 50% to achieve vertical centering. However, some browsers have compatibility issues.
Core code:
1{2 position: relative; 3 }4{5 position: absolute; 6 top: 50%; 7 transform: translatey ( -50%); 8 }
Demo Program:
Demo Code
3 Horizontal Vertical Center 3.1 fixed width high element horizontal vertical Center
Pans the element horizontally vertically by half the overall width of the margin .
Core code:
1 . Parent{2 position:relative;3}4 . Child{5 width:300px;6 Height:100px;7 padding:20px;8 position:Absolute;9 Top:50%;Ten Left:50%; One margin:-70px 0 0-170px; A}
Demo Program:
Demo Code
3.2 Unknown wide height element horizontally vertically centered
With a 2D transform, half of the width is shifted horizontally and vertically in two directions, so that the element is vertically centered.
Core code:
1{2 position: relative; 3 }4{5 position: absolute; 6 top: 50%; 7 left: 50%; 8 transform: translate ( -50%, -50%); 9 }
Demo Program:
Demo Code
3.3 Leveraging Flex Layouts
Use the flex layout, justify-content
which is used to set or retrieve the alignment of the elastic box element in the direction of the spindle align-items
(horizontal axis), whereas the property defines the alignment of the Flex subkey in the side axis (vertical) direction of the current line of the Flex container.
Core code:
1{2 display: flex; 3 justify-content: Center; 4 align-items: Center; 5 }
Demo Program:
Demo Code
3.4 Using the Grid layout
Using grid to achieve horizontal vertical centering, poor compatibility, not recommended.
Core code:
1{2 height: 140px; 3 display: grid; 4 }56 margin: auto; 7 }
Demo Program:
Demo Code
3.5 Horizontal vertical centering on the screen
Horizontal vertical centering on the screen is common, and regular login and registration pages are required. To ensure good compatibility, you also need to use the table layout.
Core code:
1 . Outer{2 Display:Table;3 position:Absolute;4 Height:100%;5 width:100%;6}7 8 . Middle{9 Display:Table-cell;Ten vertical-align:Middle; One} A - . Inner{ - Margin-left:Auto; the Margin-right:Auto; - width:400px; -}
Demo Program:
Demo Code
NO. 212 Day: 15 kinds of css centered way, the most complete