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

In this article Xiaobian for you to introduce in detail "what are the ways to center elements in HTML", the content is detailed, the steps are clear, and the details are handled properly. I hope that this article "what are the ways to make elements center in HTML" can help you solve your doubts.

1. The vertical horizontal center of the text

Div {

Width: 200px

Height: 200px

Background-color: greenyellow

Color: white

/ * Line height is equal to the height of the box, complete vertical centering * /

Line-height: 200px

/ * the level of the element is centered * /

Text-align: center

}

Center vertically and horizontally

Ps: the above methods only focus on the horizontal level of the text

two。 The vertical level of the box is centered.

.outer {

Width: 300px

Height: 300px

Background-color: gainsboro

Text-align: center

Line-height: 100px

/ * because the BFC specification is triggered, the margin collapse can be solved and the vertical centering can be completed * /

Overflow: hidden

Margin: 0 auto

}

.inner {

Width: 100px

Height: 100px

Background-color: pink

Margin: 100px auto

}

The box is centered

3. The picture is centered in the box

.box {

Width: 300px

Height: 300px

Border: 1px dotted blue

Margin: 0 auto

Line-height: 400px

Text-align: center

}

Ps: the special text type of the picture, so use the vertical horizontal center method of ordinary text to complete the center of the picture, you need to note that the size of the picture must be less than half of the box, otherwise the effect is not obvious.

4. Using positioning to realize the center of the box

.outer {

Width: 300px

Height: 300px

Background-color: # fcfdcd

Position: relative

}

.inner {

Width: 100px

Height: 100px

Background-color: # 00ffcd

Text-align: center

Line-height: 100px

Position: absolute

Top: 50%

Left: 50%

/ * since the positioning starts with the upper-left corner of the element, you need to move half the size of the box upward to the left * /

Margin-top:-50px

Margin-left:-50px

}

Positioning center

5. Using flex layout to achieve centering

.outer {

Width: 300px

Height: 300px

Background-color: # d3d60e

Display: flex

Justify-content: center

Align-items: center

}

.inner {

Color: # fff

Width: 100px

Height: 100px

Background-color: # 13b86b

Text-align: center

}

Flex in the middle

6. Grid layout to achieve centering

.outer {

Width: 300px

Height: 300px

Background-color: gainsboro

Text-align: center

Line-height: 100px

Display: grid

Grid-template-columns: repeat (3100px)

Grid-template-rows: repeat (3100px)

}

.inner {

Width: 100px

Height: 100px

Background-color: pink

}

Grid centered

7. The element is centered vertically and horizontally in the current browser

Body {

Background-color:gray

}

.box {

Width: 400px

Height: 300px

Line-height: 300px

Text-align: center

Background-color: orange

Position: absolute

Top: 50%

Left: 50%

Margin-left:-200px

Margin-top:-150px

}

Center vertically and horizontally in the browser

After reading this, the article "what are the ways to center elements in HTML" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself. If you want to know more about related articles, you are welcome to follow the industry information channel.

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.