CSS resuelve el problema del centrado del modelo de caja

CSS implementa múltiples métodos de centrado horizontal, centrado vertical y centrado horizontal y vertical del modelo de caja

Método CSS para realizar el centrado horizontal del modelo de caja

Estilo global

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

El primer tipo: margen + ancho

Este método es adecuado para cajas que ya conocen el ancho y es relativamente sencillo de implementar.

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

El segundo tipo: alineación de texto + bloque en línea

Este método es adecuado para una variedad de escenarios (el ancho no es fijo)

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

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

El tercer tipo: posición flotante +

Este método es adecuado para una variedad de escenarios (el ancho no es fijo)

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

Cuarto:

Este método es adecuado para una variedad de escenarios (el ancho no es fijo)

<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%; 
}

Quinto: flexión

Este método es adecuado para una variedad de escenarios (el ancho no es fijo)

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

Sexto: contenido en forma

Este método es adecuado para una variedad de escenarios (el ancho no es fijo)

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

Método CSS para lograr el centrado vertical del modelo de caja

El primer tipo: posición

Este método es adecuado para cajas cuyo ancho ya se conoce

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

El segundo tipo: posición + transformación

Este método es adecuado para cajas cuyo ancho ya se conoce

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

El tercer tipo: diseño flexible

Este método es adecuado para una variedad de escenarios (el ancho no es fijo)

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

Cuarto: diseño de celda de tabla

Este método es adecuado para una variedad de escenarios (el ancho no es fijo)

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

CSS para realizar el método de centrado horizontal y vertical del modelo de caja

El primero:

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

El segundo tipo:

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

El tercer tipo:

<div class="parent"> 
<div class="child"></div> </div> 
.parent { 
position:relative; 
} 
.child { 
position: absolute; 
top: 50%; 
left: 50%; 
margin-top:
-25px; /* 自身 height 的一半 */ margin-left: -25px; /* 自身 width 的一半 */ 
}