Tabla de contenido
Dos, el método de centrado horizontal y vertical de las cajas CSS
1. pantalla: implementación de diseño elástico flexible
2. pantalla: implementación de diseño de cuadrícula de cuadrícula
3. Implementación del diseño de la mesa
4. Posicionamiento+margen: implementación automática
5. Posicionamiento + margen: Valor negativo
6. Posicionamiento + transformación
I. Introducción
En el desarrollo diario de la interfaz del sitio web o la aplicación. En el proceso de los applets, se encontrará con la necesidad de centrar el cuadro horizontal y verticalmente. Diferentes requisitos nos obligan a adoptar diferentes métodos para el centrado horizontal y vertical de los elementos.
Dos, el método de centrado horizontal y vertical de las cajas CSS
1. pantalla: implementación de diseño elástico flexible
| Atributos | describir |
| mostrar | Especifica el tipo de cuadro de un elemento HTML |
| dirección de flexión | Especifica la disposición de los elementos secundarios en el flexbox |
| justificar-contenido | Establecer la disposición de los elementos en el flexbox en la dirección del eje principal |
| alinear elementos | Establece la alineación de los elementos en el flexbox en la dirección del eje transversal |
El centrado horizontal y vertical se logra estableciendo un diseño elástico para el cuadro principal. El ejemplo de código es el siguiente
.father {
width: 200px;
height: 200px;
background: red;
display: flex;
/* 实现水平方向上居中 */
justify-content: center;
/* 实现垂直方向居中 */
align-items: center;
}
.son {
width: 100px;
height: 100px;
background: green;
}
<div class="father">
<div class="son"></div>
</div>El efecto es el siguiente:
2. pantalla: implementación de diseño de cuadrícula de cuadrícula
La misma idea que la implementación del diseño elástico, solo configure el cuadro principal como un diseño de cuadrícula directamente
.father {
width: 200px;
height: 200px;
background: red;
display: grid;
/* 实现水平方向上居中 */
justify-content: center;
/* 实现垂直方向居中 */
align-items: center;
}
.son {
width: 100px;
height: 100px;
background: green;
}
<div class="father">
<div class="son"></div>
</div>3. Implementación del diseño de la mesa
Establezca el elemento secundario en display:inline-block configurando el elemento principal en display:table-cell.
.father {
width: 200px;
height: 200px;
background: red;
display: table-cell;
/* 垂直方向居中 */
vertical-align: middle;
/* 水平方向居中 */
text-align: center;
}
.son {
display: inline-block;
width: 100px;
height: 100px;
background: green;
}
<div class="father">
<div class="son"></div>
</div>4. Posicionamiento+margen: implementación automática
A través de la fase hijo y padre, y establezca los elementos secundarios (izquierda, arriba, derecha, abajo) en 0, entonces, si no establece el ancho y la altura del elemento secundario en este momento, el ancho y la altura del elemento secundario será el ancho y alto del elemento padre,
Puede pensar detenidamente en lo siguiente. Al establecer dos de estas cuatro propiedades, las posiciones de los dos lados se fijan y se determina la posición del elemento secundario. Cuando se establecen las cuatro propiedades, se determina la posición del elemento. Ancho Altura.
.father {
width: 200px;
height: 200px;
position: relative;
background: red;
}
.son {
width: 100px;
height: 100px;
background: green;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
<div class="father">
<div class="son"></div>
</div>5. Posicionamiento + margen: Valor negativo
La posición del elemento secundario está determinada por el elemento secundario y el padre, y luego el elemento secundario se mueve por margen para lograr el efecto de centrado horizontal y vertical del elemento secundario.
La idea de implementación específica es la siguiente:
Primero configure el posicionamiento relativo para el elemento principal y luego configure el posicionamiento absoluto para el elemento secundario, arriba: 50%, izquierda: 50%, el código es el siguiente
.father {
width: 200px;
height: 200px;
position: relative;
background: red;
}
.son {
width: 100px;
height: 100px;
background: green;
position: absolute;
top: 50%;
left: 50%;
}Pero en este momento, no logró el efecto que queríamos.
Pero si usamos margin para ajustar la posición del elemento secundario en este momento, podemos lograr el efecto de centrar el elemento secundario horizontal y verticalmente.El valor de margin-left es la mitad del ancho y la altura del elemento secundario en sí.
.father {
width: 200px;
height: 200px;
position: relative;
background: red;
}
.son {
width: 100px;
height: 100px;
background: green;
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
}Hasta ahora, el elemento hijo ha logrado el efecto.
6. Posicionamiento + transformación
La idea es la misma que 5. Posicionamiento + margen . La posición se determina inicialmente a través del posicionamiento absoluto, y luego la posición se ajusta de acuerdo con la transformación. El ancho y la altura de la transformación (-50%, -50%) son ambos desplazado por la mitad del ancho y la altura del propio subelemento.
.father {
width: 200px;
height: 200px;
position: relative;
background: red;
}
.son {
width: 100px;
height: 100px;
background: green;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}3. Resumen
Cuando no conocemos el ancho y la altura del elemento, aún podemos lograr métodos de centrado horizontal y vertical: diseño flexible, diseño de cuadrícula, posicionamiento + automático, posicionamiento + transformación,
Estas son formas comunes de centrar elementos horizontal y verticalmente. Bienvenidos a todos a discutir en el área de comentarios y aprender juntos.