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

This article introduces the "html element horizontal center, vertical center, horizontal vertical center in its parent element method tutorial" related knowledge, in the actual case operation process, many people will encounter such a dilemma, and then let the editor lead you to learn how to deal with these situations! I hope you can read it carefully and be able to achieve something!

The method by which the html element is horizontally centered on its parent element:

Method 1:

The code is as follows:

Left and right center method 1

The code is as follows:

Html,body,div {

Margin:0

Padding:0

Height:100%

Position:relative

}

.wrap {

Width:400px

Height:300px

Margin:10px

Border:1px solid # 000

}

.left-right-middle1 {

Width:200px

Background-color:#69F

Margin:0 auto

}

Method 2:

The code is as follows:

Left and right center method 2

The code is as follows:

Html,body,div {

Margin:0

Padding:0

Height:100%

Position:relative

}

.wrap {

Width:400px

Height:300px

Margin:10px

Border:1px solid # 000

}

.left-right-middle2 {

Width:200px

Background-color:#69F

Left:50%

Margin-left:-100px

}

The method by which the html element is centered vertically on its parent element:

The code is as follows:

Upper and lower center

The code is as follows:

Html,body,div {

Margin:0

Padding:0

Height:100%

Position:relative

}

.wrap {

Width:400px

Height:300px

Margin:10px

Border:1px solid # 000

}

.top-bottom-middle {

Height:200px

Background-color:#69F

Top:50%

Margin-top:-100px

}

The method by which the html element is centered horizontally and vertically on its parent:

Method 1:

The code is as follows:

Up, down, left and right center method 1

The code is as follows:

Html,body,div {

Margin:0

Padding:0

Height:100%

Position:relative

}

.wrap {

Width:400px

Height:300px

Margin:10px

Border:1px solid # 000

}

. all-middle1 {

Width:200px

Height:200px

Background-color:#69F

Top:50%

Margin:-100px auto 0

}

Method 2:

The code is as follows:

Up, down, left and right center method 2

The code is as follows:

Html,body,div {

Margin:0

Padding:0

Height:100%

Position:relative

}

.wrap {

Width:400px

Height:300px

Margin:10px

Border:1px solid # 000

}

. all-middle2 {

Width:200px

Height:200px

Background-color:#69F

Top:50%

Left:50%

Margin:-100px 00-100px

}

Complete code:

The code is as follows:

Div Middle

Html,body,div {

Margin:0

Padding:0

Height:100%

Position:relative

}

.wrap {

Width:400px

Height:300px

Margin:10px

Border:1px solid # 000

}

.left-right-middle1 {

Width:200px

Background-color:#69F

Margin:0 auto

}

.left-right-middle2 {

Width:200px

Background-color:#69F

Left:50%

Margin-left:-100px

}

.top-bottom-middle {

Height:200px

Background-color:#69F

Top:50%

Margin-top:-100px

}

. all-middle1 {

Width:200px

Height:200px

Background-color:#69F

Top:50%

Margin:-100px auto 0

}

. all-middle2 {

Width:200px

Height:200px

Background-color:#69F

Top:50%

Left:50%

Margin:-100px 00-100px

}

Left and right center method 1

Left and right center method 2

Upper and lower center

Up, down, left and right center method 1

Up, down, left and right center method 2

Effect picture:

This is the end of the tutorial on how to center the html element horizontally, vertically, and horizontally to its parent element. Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.