[CSS] Métodos de diseño de centrado y centrado horizontal y vertical de uso común (análisis específico del contenido)

Prefacio

Anteriormente resumí un artículo sobre varios métodos de centrado horizontal y vertical. Puede saber que los métodos para lograr el centrado horizontal y vertical son realmente innumerables, pero cada uno tiene sus propias ventajas y desventajas. Quiero aplicarlos en la práctica. Para usar Estos métodos correctamente, es necesario confiar en la acumulación habitual, y estar familiarizado con algunos de ellos puede resolver la mayoría de los problemas de centrado. Recientemente, he aprendido varios métodos mágicos, así que compartámoslos.

texto

Método de centrado horizontal

• text-align+ display:inline-blockUsar con atributos.
• table+ marginUsar con atributos
• absolute+ transformUsar con atributos

Método uno, text-align+display:inline-block

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

Primero creamos un estilo normal

<style type="text/css">
	#parent{
     
     
		width: 100%;
		height: 200px;
		background: pink;
	}
	#child{
     
     
		width: 200px;
		height: 200px;
		background: #987;
	}
</style>

<div id="parent">
	<div id="child">
		水平居中
	</div>
</div>

El efecto que se muestra en este momento es así.

Agreguemos dos atributos al estilo.

#parent{
    
    
	width: 100%;
	height: 200px;
	background: pink;

	text-align: center;
}
#child{
    
    
	width: 200px;
	height: 200px;
	background: #987;

	display: inline-block;
}

<div id="parent">
	<div id="child">
		水平居中
	</div>
</div>

En este momento, el nivel está centrado

, analicemos, ¿por qué usar estos dos atributos? ¿Por qué usarlo inline-blocken lugar de inlineél?

• text-alignAtributo: es establecer la alineación para el contenido del texto
  left: alineación izquierda
  center: alineación central
  right: alineación derecha ¿
  Entonces tendrá preguntas en este momento? El conocimiento inicial de este atributo funciona en el texto, entonces, ¿por qué divtambién funciona en los elementos en este momento ? La clave es que el displayatributo y el valor se establecen para el elemento secundario inline-block.

displayLos atributos tienen varios atributos comunes ::
blockelementos de nivel de bloque
inline: los elementos
widthy heightatributos en
inline-blocklínea no serán válidos : los elementos de nivel de bloque en línea (nivel de bloque + en línea)
widthy los heightatributos son válidos

Cuando el elemento hijo es un elemento en línea, text-alignfuncionará.
inline-blockUsando las características de los elementos en línea,
¿por qué no establecer la propiedad de visualización del elemento secundario inline? Debido a que los elementos en línea tienen sus propios problemas, cuando insertamos un elemento en línea de un elemento, chlidel atributo de widthsuma heightno será válido. Puedes probar inlineel efecto.

Entonces lo usamos inline-blockpara hacer efectivas childlas propiedades widthy heightpropiedades, con el fin de lograr el efecto que queremos.

Ventajas y desventajas

• Ventajas: La compatibilidad del navegador es relativamente buena, para la versión 6-9 del navegador IE, text-aligny inline-blockambos son compatibles.
• Desventajas: Los text-alignatributos se heredan, lo que hace que el texto de los elementos secundarios se muestre en el centro. (Resuelto, restaure text-alignlos atributos en el elemento hijo )

Si el texto del elemento secundario no necesita estar centrado, debe procesarse text-alignEl valor establecido en el elemento secundario leftpuede anular el text-alignvalor del atributo del elemento principal .

Método dos, usar con table+ marginatributos

.child{
    
    
	dispaly: table;
	margin: 0 auto;
}	

Agregue contenido css clave en el estilo normal del primer método

#parent{
    
    
	width: 100%;
	height: 200px;
	background: pink;
}
#child{
    
    
	width: 200px;
	height: 200px;
	background: #987;
	display: table;
	margin: 0 auto;
}

<div id="parent">
	<div id="child">
		水平居中
	</div>
</div>

Se logra el mismo
análisis de efectos
margin:

1. Establecido en un valor, lo que significa que la parte superior derecha e inferior izquierda son iguales.
2. Establecido en dos valores, el primero significa arriba y abajo, y el segundo significa izquierda y derecha.
3. Establecido en tres valores, el primero representa hacia arriba, el segundo representa hacia la izquierda y hacia la derecha, y el tercero representa hacia abajo.
4. Establecer en cuatro valores, superior derecha, inferior izquierda.

Siempre margin: 0 auto;que se autoindique, se asigna automáticamente según el navegador. Entonces el navegador dividirá los márgenes izquierdo y derecho por igual

display: table;:
El mismo efecto se puede obtener displayla configuración a block, pero el estilo en línea inlinese childinvalidará la anchura y la altura. Por lo tanto, se displaypuede establecer en dos valores: table, block.

Ventajas y desventajas

• Ventajas: solo es necesario configurar los elementos secundarios para realizar la visualización horizontal en el centro
• Desventaja:
  si el elemento secundario abandona el flujo del documento, el valor del atributo de margen deja de ser válido.
  El llamado elemento está fuera del flujo del documento, la situación posible es que el elemento hijo se establezca en las siguientes tres situaciones, lo que invalidará el valor del atributo de margen.
  • position: absolute;
  • position: fixed;
  • float: left/right

Método tres, usar con atributos absolute+transform

#parent{
    
    
	position: relative;
}
#child{
    
    
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

Use estilo normal más los atributos anteriores

#parent{
    
    
	width: 100%;
	height: 200px;
	background: pink;
	position: relative;
}
#child{
    
    
	width: 200px;
	height: 200px;
	background: #987;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

<div id="parent">
	<div id="child">
		水平居中
	</div>
</div>

Análisis Después de que el
position: absolute;
elemento actual se establece en posicionamiento absoluto:

• Si el elemento principal no tiene un posicionamiento definido, el elemento actual se coloca en relación con la página.
• Si el posicionamiento está habilitado para el elemento padre (bajo no posicionamiento static), el elemento actual se posiciona con relación al elemento padre.

left: 50%;
La distancia izquierda del elemento secundario en relación con el elemento principal es del 50%;

transform: translateX(-50%);
El elemento secundario se mueve la mitad del ancho del elemento secundario hacia la izquierda. transform significa traducción, translateX () significa traducción horizontal.

Ventajas y desventajas

• Ventajas: si el elemento principal está fuera del flujo de documentos, no afecta el efecto de centrado horizontal del elemento secundario.
• Desventajas: el atributo de transformación es un atributo nuevo en CSS3 y el soporte del navegador no es bueno.

Método de centrado vertical

Después de hablar sobre el método de centrado horizontal, aquí hay dos esquemas de centrado vertical comunes. Hay dos formas habituales.

• table-cell+ vertical-alginatributo
• absolute+ transformUsar con atributos

Método uno, table-cell+ vertical-alginusar juntos

Código clave en el método uno

#parent{
    
    
	display: table-cell;
	vertical-align: middle;
}

El estilo general se modifica en la siguiente forma:

#parent{
    
    
	width: 200px;
	height: 300px;
	background: pink;
}
#child{
    
    
	width: 200px;
	height: 200px;
	background: #987;
}

Agregue el código de clave anterior.

#parent{
    
    
	width: 200px;
	height: 300px;
	background: pink;
	display: table-cell;
	vertical-align: middle;
}
#child{
    
    
	width: 200px;
	height: 200px;
	background: #987;
}

El efecto es el siguiente: El

análisis se
vertical-align: middle;
utiliza para establecer la alineación vertical del contenido del texto y vertical-alignlos valores son los siguientes:

• arriba: alinear en la parte superior
• medio: alineación central
• parte inferior: la parte inferior de la alineación
  display: table-cell;
  tabla-celda, que tablees para establecer el elemento actual como un <table>elemento, table-celles para establecer el elemento actual como un <td>elemento (celda)

La integración de los dos elementos centrales juntos puede lograr el efecto de centrado. Cuando configuramos el displayatributo del elemento principal para que table-cellsea ​​equivalente a establecer el elemento principal en una celda de la tabla, el contenido de la celda se puede alinear de dos formas Sí, una es la alineación horizontal y la otra es la alineación vertical.Como elemento hijo, dives equivalente al contenido de la celda, y finalmente muestra el efecto del centrado vertical.

Ventajas y desventajas

• Ventajas: La compatibilidad del navegador es mejor (principalmente para la versión anterior del navegador, porque el usado table-celly los vertical-alginatributos son el contenido de la versión CSS2, y la compatibilidad del CSS2 con la versión anterior del navegador es mejor)
• Desventajas: los vertical-alginatributos se heredan, lo que hace que el texto del elemento padre se muestre en el centro.

Agregue contenido de texto al elemento principal, y este contenido también se mostrará en el centro.

Método dos, usar con absolute+ transformatributos

Clave

#parent{
    
    
	position: relative;
}
#child{
    
    
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

lograr

#parent{
    
    
	width: 200px;
	height: 300px;
	background: pink;
	position: relative;
}
#child{
    
    
	width: 200px;
	height: 200px;
	background: #987;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

<div id="parent">
	<div id="child">
		垂直居中
	</div>
</div>

Esta parte es similar al tercer tipo de archivo, que está centrado horizontalmente, puede consultar lo anterior aquí.

Disposición centrada

De hecho, esta es la integración de métodos verticales y horizontales.

• table+ marginLogra el centrado horizontal, table-cell+ vertical-alginLogra el centrado vertical.
• absolute+ transformRealice la visualización centrada en las direcciones horizontal y vertical.

Método 1: table+ marginrealizar el centrado horizontal, table-cell+ vertical-alginrealizar el centrado vertical

#parent{
    
    
	width: 400px;
	height: 400px;
	background: pink;
	
	display: table-cell;
	vertical-align: middle;
}
#child{
    
    
	width: 200px;
	height: 200px;
	background: #987;
	
	display: table;
	margin: 0 auto;
}

<div id="parent">
	<div id="child">
		居中布局
	</div>
</div>

Ventajas y
desventajas de las primeras soluciones Desventajas:
Podemos saber que el parentmedio ha table-cellhecho <td>convertirse en un elemento padre, pero childel tablevalor de la media <table>se ha convertido en un elemento secundario, por lo que aquí es necesario mejorar. Modifique
el displayvalor del atributo del elemento hijo para blocklograr el mismo efecto, lo que también resuelve el problema de los fragmentos de lenguaje.

#child{
    
    
	width: 200px;
	height: 200px;
	background: #987;
	
	display: block;
	margin: 0 auto;
}

Ventajas: la compatibilidad del navegador es mejor.

Método 2: absolute+ transformRealice la visualización centrada en las direcciones horizontal y vertical

Clave

#parent {
    
    
	position: relative;
}

#child {
    
    
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50% , -50%);
}

Es fácil entender que combina métodos de centrado horizontal y vertical y centrado a través de propiedades de posicionamiento.

Código de implementación

#parent {
    
    
	width: 400px;
	height: 400px;
	background: pink;

	position: relative;
}

#child {
    
    
	width: 200px;
	height: 200px;
	background: #987;

	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50% , -50%);
}

Ventajas y desventajas
Desventajas: compatibilidad relativamente baja
Ventajas: se puede aplicar a más escenarios y el método es bueno

para resumir

Ninguna solución es óptima. Necesitamos lograr el mismo efecto de acuerdo con los escenarios de aplicación reales.