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

This article mainly introduces the relevant knowledge of how to make div center in html, the content is detailed and easy to understand, the operation is simple and fast, and it has a certain reference value. I believe you will gain something after reading this html article on how to make div center. Let's take a look at it.

Margin method

You can center the div by margin, and divide the width of the child element by 2 (in this case: (400,100) / 2=150px) by setting the value of the margin-left as the parent element, and divide the value of margin-top by the height of the parent element minus the height of the child element by dividing by 2 (in this case: (300,100) / 2=100px)

Example:

one

two

three

four

five

six

seven

eight

nine

ten

eleven

twelve

thirteen

fourteen

fifteen

sixteen

seventeen

eighteen

nineteen

twenty

twenty-one

.box {

Width:400px

Height: 300px

Border: 1px solid # ccc

}

.box1 {

Width:100px

Height: 100px

Background-color: pink

Margin-left: 150px

Margin-top:100px

}

Effect picture:

Position method

We can make the div center vertically by positioning. We can set the absolute positioning of the child element, and set the top and left values to 50%. But we should note that the edge value should also be set when positioning is in use, where the values of margin-left and margin-right are both negative, and the value is half the width and height of the child element.

Example:

one

two

three

four

five

six

seven

eight

nine

ten

eleven

twelve

thirteen

fourteen

fifteen

sixteen

seventeen

eighteen

nineteen

twenty

twenty-one

twenty-two

twenty-three

twenty-four

.box {

Width:400px

Height: 300px

Border: 1px solid # ccc

Position: relative

}

.box1 {

Width:100px

Height: 100px

Background-color: pink

Position: absolute

Top: 50%

Left: 50%

Margin:-50px 0 0-50px

}

Effect picture:

This is the end of the article on "how to center div in html". Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "how to make div center in html". If you want to learn more knowledge, 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.