CSS realizes various methods of horizontal, vertical and horizontal centering of box model

CSS method for realizing horizontal centering of box model

Global style

.parent { 
color: #FFFFFF; 
height: 200px; 
width: 200px; 
margin: 0 auto;
background-color: #000000;
 } 
.child { 
width: 50px;
height: 50px;
background-color: #26f12d;
 }

First: margin+width

This method is applicable to boxes with known width and is relatively simple to implement

<div class="parent"> 
<div class="child"></div> </div> 
.child { 
width: 50px;
margin: 0 auto; 
}

Second: text align + inline block

This method is applicable to a variety of scenes (the width is not fixed)

<div class="parent"> 
<div class="child"></div> </div> 

.parent { 
text-align:center; 
} 
.child { 
display: inline-block;
 }

The third type: float+position

This method is applicable to a variety of scenes (the width is not fixed)

<div class="parent"> 
<div class="between"> 
<div class="child"></div> </div>
</div> 
.between { 
position: relative; 
left: 50%; 
float: left; 
} 
.child {
position: relative; 
right: 50%; }

Fourth:

This method is applicable to a variety of scenes (the width is not fixed)

<div class="parent"> 
<div class="between"> 
<div class="child"></div> </div>
</div>
 .parent {
 position: relative; 
} 
.between { 
position: absolute; 
left:50%;
 } 
.child { 
position: relative; 
right: 50%; 
}

Fifth: flex

This method is applicable to a variety of scenes (the width is not fixed)

<div class="parent"> <div class="child"></div> </div> 
.parent { 
display:-webkit-box; 
-webkit-box-pack: center; 
-webkit-box-orient: horizontal; 
}

The sixth type: fit content

This method is applicable to a variety of scenes (the width is not fixed)

<div class="parent"> 
<div class="between"> 
<div class="child"></div> </div>
</div> 
.between { 
width: -webkit-fit-content; 
margin: 0 auto; 
}

CSS method for realizing vertical centering of box model

First: position

This method applies to boxes that already know width

<div class="parent"> 
<div class="child"></div> </div> 
.parent { position:relative; 
width: 200px; 
height: 200px; 
} 
.child { 
position: absolute; 
margin:75px 0; 
}

The second: position+transform

This method applies to boxes that already know width

<div class="parent"> 
<div class="child"></div> </div> 
.parent { position:relative; 
width: 200px; 
height: 200px; 
} 
.child { 
position: absolute; 
top: 50%;
transform: translate(0%, -50%); 
}

Third: flex layout

This method is applicable to a variety of scenes (the width is not fixed)

<div class="parent"> 
<div class="child"></div> </div> 
.parent { 
display: flex;
align-items: center; 
}

The fourth type: table cell layout

This method is applicable to a variety of scenes (the width is not fixed)

<div class="parent"> 
<div class="between"> 
<div class="child"></div> </div>
</div> 
.parent { 
display: table; 
} 
.between { 
display: table-cell;
vertical-align: middle; 
}

CSS method for realizing horizontal and vertical centering of box model

First:

<div class="parent"> 
<div class="child"></div> </div> 
.parent { 
position:relative; 
} 
.child { 
position: absolute; 
left: 50%; 
top: 50%; 
transform:translate(-50%,-50%); 
}

Second:

<div class="parent"> 
<div class="child"></div> </div> 
.parent { position:relative; 
} 
.child { 
position: absolute; 
top: 0; 
bottom: 0; 
left: 0; 
right: 0;
margin: auto; 
}

Third:

<div class="parent"> 
<div class="child"></div> </div> 
.parent { 
position:relative; 
} 
.child { 
position: absolute; 
top: 50%; 
left: 50%; 
margin-top:
-25px; /* Half of their own height */ margin-left: -25px; /* Half of its own width */ 
}

last

Sorting out the interview questions is not to let everyone just brush the interview questions, but to be familiar with the common investigation methods and knowledge points in the current actual interview, so as to know well. It can also be used to self-examine and improve the knowledge system.

Front end basic interview questions, front end school recruitment interview questions compilation and analysis, front end interview questions collection, front end interview questions: common algorithms PDF full version Click here for free

Good knowledge system.

Front end basic interview questions, front end school recruitment interview questions compilation and analysis, front end interview questions collection, front end interview questions: common algorithms PDF full version Click here for free

[external chain picture transferring... (img-SUXJzfwt-1627097800031)]

[external chain picture transferring... (img-sPKltBjZ-1627097800034)]

[external chain picture transferring... (img-Uyehui1d-1627097800035)]