Cómo centrar una imagen con CSS
1. Primero cargue una imagen en la página. El código y el efecto se muestran a continuación:
2. Luego, establezca un nombre de clase para la imagen para facilitar la operación.
3. Luego configure el estilo CSS para la imagen. Para mayor comodidad, escriba el estilo CSS directamente en la página HTML.
4. "margin: 0 auto" se usa a menudo para lograr el centrado horizontal, pero siempre se ha pensado que "margin: auto" no puede lograr el centrado vertical. Sin embargo, de hecho, se puede lograr el efecto. simplemente agregando algunas restricciones simplemente mediante el posicionamiento:
posición: absoluta;?
arriba: 0;
izquierda: 0;
right: 0;?
Establezca el posicionamiento de modo que la parte superior, inferior, izquierda y derecha sean 0, y luego use margin: 0 auto para centrar el elemento arriba, abajo, izquierda y derecha.
5. Después de configurar el estilo CSS, puede ver el efecto del código navegando y puede ver que la imagen se ha implementado.
6. Finalmente, aquí está todo el código:
<. /p>
.pic{
margen: automático;?
posición: absoluta ?
arriba: 0;
izquierda: 0;
abajo: 0;
derecha: 0;?
}