A menudo me encuentro con algunos estudiantes preguntando, ¿cómo hacer que un elemento se centre hacia arriba, hacia abajo, hacia la izquierda y hacia la derecha? Creo que a menudo encontrará este problema durante las entrevistas. Aquí hay algunas formas de referencia. Si tiene alguna deficiencia, agregue.
Descripción del problema:
Dados dos elementos, estos dos elementos tienen una relación padre-hijo. Y el tamaño de los dos elementos es incierto, entonces, ¿cómo hacer que el niño se centre hacia arriba, hacia abajo, hacia la izquierda y hacia la derecha en el padre en este momento? (Por el momento, establezca que el padre sea más grande que el niño)
El primero: usa el posicionamiento,
primero sube el código y el efecto:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.content{
width:500px;
height:300px;
border:1px solid #0a3b98;
position: relative;
}
.box{
width:100px;
height:40px;
background: #f0a238;
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}
</style>
</head>
<body>
<div class="content">
<div class="box"></div>
</div>
</body>
</html>
Análisis de ideas: el
posicionamiento relativo del padre, el posicionamiento absoluto del niño y los valores de los cuatro atributos de posicionamiento se establecen en 0, luego, si el niño no establece el ancho y la altura en este momento, se estirará al mismo ancho y alto que el padre. Y ahora el ancho y el alto del niño están configurados, por lo que el ancho y el alto se mostrarán de acuerdo con nuestra configuración, pero de hecho el marcador de posición virtual del niño ha llenado todo el padre. En este momento, dale un margen: auto . Centrado arriba, abajo, izquierda y derecha
El segundo tipo, posicionamiento con desplazamiento css3,
aún carga directamente el código
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.content{
width:500px;
height:300px;
border:1px solid #0a3b98;
position: relative;
}
.box{
width:100px;
height:40px;
background: #f0a238;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="content">
<div class="box"></div>
</div>
</body>
</html>
CSS hace que el elemento esté absolutamente centrado. ¿De cuántas formas conoces?
Idea:
posicionamiento relativo del padre, posicionamiento absoluto del hijo, y si los atributos superior e izquierdo se dan como un porcentaje, este porcentaje se calcula en relación con el ancho y el alto del padre. Si solo estos dos valores son dado, la esquina superior derecha del niño se alineará con el punto central del padre, y se obtendrá la siguiente imagen:
CSS hace que el elemento esté absolutamente centrado. ¿De cuántas formas conoces?
En este momento, se necesitan más operaciones: el atributo de desplazamiento en css3 calcula el porcentaje en función de sí mismo, por lo que solo necesita usar este atributo para moverse a la esquina superior izquierda en un 50%, de modo que el niño pueda moverse hacia arriba, hacia abajo , izquierda y derecha en el padre. Centrado
El tercer tipo: use la visualización del elemento de bloque en línea:
código y efecto de bloque en línea :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.content{
width:500px;
height:300px;
border:1px solid #0a3b98;
text-align: center;
}
.content:before{
content: '';
height:100%;
width:0;
display: inline-block;
vertical-align: middle;
}
.box{
width:100px;
height:40px;
background: #f0a238;
display: inline-block;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="content">
<div class="box"></div>
</div>
</body>
</html>
Como resultado, ya no necesito leerlo, puedes copiar el código y probarlo tú mismo.
Idea: En
primer lugar, convierta al niño en un elemento de bloque en línea, luego puede usar directamente text-align: center para obtener el centrado izquierdo y derecho, y la dificultad de este método radica en el centrado superior e inferior. El niño es un elemento de bloque en línea. Por supuesto, es imposible decir que establecer una altura de fila para el padre centrará obedientemente al niño hacia arriba y hacia abajo. Entonces se requieren operaciones más complicadas:
Primero, establezca la alineación vertical para el niño: vartical-align
tiene estos valores: superior, línea de base, inferior, medio, etc. Creo que el significado de estos valores no necesita que yo lo explique.
CSS hace que el elemento esté absolutamente centrado. ¿De cuántas formas conoces?
Pero este atributo tiene una desventaja: necesita una referencia, es decir, si hay dos elementos secundarios en el padre, y ambos elementos secundarios están configurados en vertical-align: middle, entonces el efecto es solo una alineación centrada entre los dos elementos. . No coloca ambos elementos secundarios en el medio del principal.
En este momento, llega la propina
Consejo 1: establezca la altura de un elemento al 100%, luego el otro elemento estará en el centro del padre hacia arriba y hacia abajo en este momento,
como se muestra en la figura:
CSS hace que el elemento esté absolutamente centrado. ¿De cuántas formas conoces?
Pero en este momento hay un elemento extra que no cumple con los requisitos. Por supuesto, si tiene dos elementos en el diseño real, y uno de los elementos se puede configurar al 100% de altura, está bien.
Consejo 2: encuentre una manera de eliminar otro elemento: use el pseudo elemento antes, consulte el código para obtener más detalles.
Sugerencias: de hecho, no es necesario hacer referencia al elemento en este momento. También es posible establecer el nivel principal con la misma altura de línea que el nivel principal, pero este principio es demasiado complicado. Además, este método no hace que el elemento esté absolutamente centrado hacia arriba y hacia abajo, lo que implica el diseño del texto.También implicará un punto clave cuando el navegador analiza el texto: línea X, no hacer una exploración en profundidad aquí, puede probarlo si tú estás interesado.
Cuarto: modelo Flexbox
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.content{
width:500px;
height:300px;
border:1px solid #0a3b98;
display: flex;
justify-content: center;
align-items: center;
}
.box{
width:100px;
height:40px;
background: #f0a238;
}
</style>
</head>
<body>
<div class="content">
<div class="box"></div>
</div>
</body>
</html>
No miraré las representaciones y creo que no hay nada que explicar. Este es todo el mérito de css3. No hay ninguna habilidad. Puedes dominar este método dominando el modelo flexbox. Es simple y grosero. Echemos un vistazo al modelo de flexbox, y escribiré algo específicamente sobre esto cuando tenga tiempo en el futuro si estoy de buen humor.
CSS hace que el elemento esté absolutamente centrado. ¿De cuántas formas conoces?
Quinto: diseño de cuadrícula
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.content{
width:500px;
height:300px;
border:1px solid #0a3b98;
display: grid;
justify-content: center;
align-items: center;
}
.box{
width:100px;
height:40px;
background: #f0a238;
}
</style>
</head>
<body>
<div class="content">
<div class="box"></div>
</div>
</body>
</html>
Este método es el mismo que el modelo flexbox, simple y grosero, no hay nada que decir. La cuadrícula es muy poderosa, por lo que puede averiguarlo si tiene tiempo. ¡Buena suerte!