Shulou(Shulou.com)06/03 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.