CSS to achieve centering < divclass = " out" > < divclass = " in" > </ div> </ div> 1. The level is centered
Realize horizontal centering through margin: 0 auto;
.out {
width : 600px;
height : 600px;
background : cornflowerblue;
}
.in {
width : 100px;
height : 100px;
background : chartreuse;
margin : 0 auto;
}
Achieve horizontal centering through position: absolute + margin-left
.out {
height : 400px;
width : 400px;
background : cadetblue;
position : relative;
}
.in {
width : 100px;
height : 100px;
background : greenyellow;
position : absolute;
left : 50%;
margin-left : -50px;
}
Achieve horizontal centering through text-align: center
.out {
height : 400px;
width : 400px;
background : cadetblue;
text-align : center;
}
.in {
width : 100px;
height : 100px;
background : greenyellow;
display : inline-block;
}
Achieve horizontal centering by hidden node + float method
< divclass = " out" > < divclass = " a" > </ div> < divclass = " in" > </ div> </ div> .out {
width : 600px;
height : 600px;
background : cornflowerblue;
}
.out .a {
content : "" ;
height : 50%;
width : 25%;
float : left;
}
.in {
width : 50%;
height : 50%;
background : chartreuse;
float : left;
}
2. Vertically centered
CSS vertical centering is achieved through position: absolute.
.out {
height : 400px;
width : 400px;
background : cadetblue;
position : relative;
}
.in {
width : 100px;
height : 100px;
background : greenyellow;
position : absolute;
top : 50%;
margin-top : -50px;
}
When the height of the vertically-centered block-level element is unknown, you can use the transform property in CSS3 to offset the Y-axis by 50% to achieve vertical centering. Some browsers may have compatibility issues.
.out {
height : 400px;
width : 400px;
background : cadetblue;
position : relative;
}
.in {
width : 100px;
height : 100px;
background : greenyellow;
position : absolute;
top : 50%;
transform : translateY ( -50%) ;
}
CSS vertical centering by hiding nodes
< divclass = " out" > < divclass = " a" > </ div> < divclass = " in" > </ div> </ div> .out {
width : 600px;
height : 600px;
background : cornflowerblue;
}
.out .a {
content : "" ;
height : 25%;
width : 50%;
}
.in {
width : 50%;
height : 50%;
background : chartreuse;
}
3. Vertical and horizontal centering
Achieve vertical and horizontal centering through position: absolute + margin: auto
.out {
width : 600px;
height : 600px;
background : cornflowerblue;
position : relative;
}
.in {
width : 100px;
height : 100px;
background : chartreuse;
position : absolute;
top : 0;
left : 0;
bottom : 0;
right : 0;
margin : auto;
}
Achieve vertical and horizontal centering through position: absolute + margin
.out {
height : 400px;
width : 400px;
background : cadetblue;
position : relative;
}
.in {
width : 100px;
height : 100px;
background : greenyellow;
position : absolute;
top : 50%;
left : 50%;
margin-top : -50px;
margin-left : -50px;
}
Use transform: translate to achieve vertical and horizontal centering
.out {
height : 400px;
width : 400px;
background : cadetblue;
position : relative;
}
.in {
width : 100px;
height : 100px;
background : greenyellow;
position : absolute;
top : 50%;
left : 50%;
transform : translate ( -50%,-50%) ;
}
Line box: use text-align: center + line-height to achieve vertical and horizontal centering
<!DOCTYPE html>
< htmllang = " en" > < head> < metacharset = " UTF-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1.0" > < title> </ title> < style>
.text {
height : 400px;
width : 400px;
background : cadetblue;
text-align : center;
line-height : 400px;
}
</ style> </ head> < body> < divclass = " text" > </ div> </ body> </ html>