What are the skills of CSS centered layout
This article mainly explains "what are the skills of CSS central layout". Friends who are interested may wish to have a look. The method introduced in this paper is simple, fast and practical. Next, let the editor take you to learn "what are the skills of CSS central layout?"
Horizontal center element:
Method 1: CSS3 transform
.parent {
Position: relative
}
.child {
Position: absolute
Left: 50%:
Transform: translateX (- 50%)
}
Method 2: flex layout
.parent {
Display: flex
Justify-content: center
}
Suitable for floating child elements, absolute positioning, inline elements, can be horizontally centered.
The centered element is the inline element in the regular document stream (display: inline)
Common inline elements are: span, a, img, input, label, etc.
.parent {
Text-align: center
}
The centered element is the block element in the regular document flow (display: block)
Common block elements: div, h2~h7, table, p, ul, li, etc.
Method 1: set margin
.parent {
Width: 100%
}
.child {
Width: 600px
Height: 50px
Margin: 0 auto
Background: # 999
}
Method 2: modify to inline-block attribute
.parent {
Text-align: center
}
.child {
Display: inline-block
}
.child {
Width: 100px
Float: left
Position: relative
Left: 50%
Margin-left:-50px
}
Method 1:
.parent {
Position: relative
}
.child {
Position: absolute
Width: 100px
Left: 50%
Margin-left:-50px
}
Method 2:
.parent {
Position: relative
}
.child {
Position: absolute
Width: 100px
Left: 0
Right: 0
Margin: 0 auto
}
Vertically centered element:
Method 1: CSS3 transform
.parent {
Position: relative
}
.child {
Position: absolute
Top: 50%
Transform: translateY (- 50%)
}
Method 2: flex layout
.parent {
Display: flex
Align-items: center
}
Suitable for floating child elements, absolute positioning, inline elements, can be vertically centered.
.text {
Line-height: 200px
Height: 200px
}
Method 1:
.parent {
Position: relative
}
.child {
Position: absolute
Top: 50%
Height: 100px
Margin-top:-50px
}
Method 2:
.parent {
Position: relative
}
.child {
Position: absolute
Top: 0
Bottom: 0
Height: 100px
Margin: auto 0
}
Vertically centered element:
Div {
Width: 100px
Height: 100px
Margin: auto
Position: fixed
/ / absolute is ok
Top: 0
Right: 0
Bottom: 0
Left: 0
}
Advantages:
It can be realized not only in the middle, but also on the left and right.
The width and height of the element supports% attribute value and min-/max- attribute
Can be encapsulated as a public class and can be used as a pop-up layer
The browser has good support.
.child {
Width: 100px
Height: 100px
Position: absolute
Top: 50%
Left: 50%
Margin-left:-50px
Margin-top:-50px
}
Features:
Good cross-browser features, compatible with IE6-IE7
Poor flexibility, non-adaptive, width and height does not support percentage size and min-/max- properties
.child {
Width: 100px
Height: 100px
Position: absolute
Top: 50%
Left: 50%
Transform: translate (- 50%,-50%)
}
Features:
The content is adaptive, can be encapsulated as a common class, and can be used as a pop-up layer.
May interfere with other transform effects
.parent {
Display: flex
Justify-content: center
Align-items: center
}
This is the future trend of CSS layout. Flexbox is a new property of CSS3 and is designed to solve common layout problems such as vertical centering.
Text {
Height: 100px
Line-height: 100px
Text-align: center
}
At this point, I believe you have a deeper understanding of "what are the skills of CSS central layout?" you might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!
