A tutorial on how to center an html element horizontally, vertically, and horizontally to its parent element
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!
