Introduction of several methods of centering commonly used in css
This article mainly explains "introduction of several methods of centering commonly used in css". Friends who are interested may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn the introduction of several methods of centering commonly used in css.
Today, let's count a few ways:
1. Use position:absolute to set the properties of left, top, margin-left, margin-top
CSS Code copies content to the clipboard
.one {
Position:absolute
Width:200px
Height:200px
Top:50%
Left:50%
Margin-top:-100px
Margin-left:-100px
Background:red
}
This method is compatible with basic browsers, but the disadvantage is that it needs to be fixed in width and height.
2. Use position:fixed, and also set the properties of left, top, margin-left, and margin-top
CSS Code copies content to the clipboard
.two {
Position:fixed
Width:180px
Height:180px
Top:50%
Left:50%
Margin-top:-90px
Margin-left:-90px
Background:orange
}
As we all know, position:fixed,IE does not support this attribute.
3. With the position:fixed attribute, margin:auto must not be forgotten.
CSS Code copies content to the clipboard
.three {
Position:fixed
Width:160px
Height:160px
Top:0
Rightright:0
Bottombottom:0
Left:0
Margin:auto
Background:pink
}
4. Use the position:absolute attribute to set top/bottom/right/left
CSS Code copies content to the clipboard
.four {
Position:absolute
Width:140px
Height:140px
Top:0
Rightright:0
Bottombottom:0
Left:0
Margin:auto
Background:black
}
5. Use the display:table-cell attribute to center the content vertically
CSS Code copies content to the clipboard
.five {
Display:table-cell
Vertical-align:middle
Text-align:center
Width:120px
Height:120px
Background:purple
}
6. The easiest way to center an in-line element is to use the line-height attribute
CSS Code copies content to the clipboard
.six {
Width:100px
Height:100px
Line-height:100px
Text-align:center
Background:gray
}
This method is also useful, such as aligning the text vertically.
7. Use the display:-webkit-box attribute of css3, and then set-webkit-box-pack:center/-webkit-box-align:center
CSS Code copies content to the clipboard
.seven {
Width:90px
Height:90px
Display:-webkit-box
-webkit-box-pack:center
-webkit-box-align:center
Background:yellow
Color:black
}
8, use css3's new attribute transform:translate (xpene y) attribute
CSS Code copies content to the clipboard
.eight {
Position:absolute
Width:80px
Height:80px
Top:50%
Left:50%
Transform:translate (- 50% Mo Mo 50%)
-webkit-transform:translate (- 50% molded 50%)
-moz-transform:translate (- 50% molded 50%)
-ms-transform:translate (- 50% molded 50%)
Background:green
}
This method does not need to set a fixed width and height, it will be used more on the mobile side, and it is better to be compatible with css3 on the mobile side.
9. The tallest one, using: before element
CSS Code copies content to the clipboard
.nine {
Position:fixed
Display:block
Top:0
Rightright:0
Bottombottom:0
Left:0
Text-align:center
Background:rgba (0pr 0pl 0.5)
}
.nine: before {
Content:''
Display:inline-block
Vertical-align:middle
Height:100%
}
.nine .content {
Display:inline-block
Vertical-align:middle
Width:60px
Height:60px
Line-height:60px
Color:red
Background:yellow
}
At this point, I believe you have a deeper understanding of the "introduction of several commonly used methods of centering in css". 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!
