He leído en muchos lugares para centrar elementos (un div por ejemplo) usando margin:0 auto.
pero ¿por qué no utilizar align:center? Creo que parece más natural usar el último.¿Cuál es la diferencia entre usar `align: center` y` margin: 0 auto` para centrar un elemento en CSS?
También la alineación con margin ¿funciona también verticalmente?
Primero, no hay "alinear: centro". Lo que estás pensando es "text-align: center", y ese detalle — el prefijo "text-" — es una pista sobre cuál es el problema. La propiedad "text-align" es para que los elementos en línea se distribuyan en bloques. Cuando intenta centrar un elemento de nivel de bloque en algún contenido, un estilo de diseño en línea no tiene sentido.
El (ahora obsoleto) alinear atributo en los elementos no es una cosa de CSS; es un retroceso a los días de antaño.
Ahora, como alineación vertical alineación, lamentablemente la respuesta es "no", al menos en términos prácticos. El truco con "margin: auto" no funcionará. La alineación vertical con nada más que CSS es un desafío, por decirlo suavemente. Hay muchas situaciones y técnicas diferentes para usar. He aquí un interesante (aunque un poco viejo) páginas sobre el tema: http://www.student.oulu.fi/~laurirai/www/css/middle/
de edición en el futuro — Cualquier persona tratando de hacer centrado vertical debe mantener un ojo en la disponibilidad de flexbox layout.
En 2015, el diseño de flexbox aún está por ganar (aunque la mayoría de los navegadores parecen estarlo soportando hasta cierto punto), pero se puede lograr una alineación vertical usando tablas css. Básicamente es lo mismo que con el diseño de tabla ahora rechazado, excepto que en lugar de table, tr y td, tienes div's con pantalla establecida en table y table-cell (de hecho, solo necesitas esos dos elementos). Sospecho que Flexbox ganará más seguidores cuando las aplicaciones HTML ganen popularidad y más personas tengan navegadores compatibles con flexbox en sus dispositivos móviles (teléfonos, tabletas, etc.). El diseño de Flexbox puede hacer una gran diferencia allí. – jahu
"Alineación vertical con nada más que CSS es un reto" definitivamente no es el caso y no tienes idea de lo que estás hablando – Jesus
@RyanEarnshaw estás leyendo una respuesta de ** 2010 **. – Pointy
text-align: center centrará el contenido del contenedor, mientras que margin: auto centrará el contenedor.
Debe tener cuidado con margin:auto porque no es compatible con IE6. En IE6, debe establecer text-align:center en el contenedor externo y restablecer el CSS para el contenedor a text-align:left.
Eso no es cierto: "IE6 es compatible con" margin: auto "cuando tienes un DOCTYPE que lo pone en modo compatible con los estándares (a diferencia del modo" peculiaridades "). – Pointy
text-align=center utilizada para alinear el contenido (texto por ejemplo) para centro, sin embargo margin: auto se utiliza para alinear el propio elemento central.
En los navegadores más antiguos, sin embargo (IE), puede alinear elementos al centro usando text-align:center.
Pero sospecho que quería decir align=center gustaría en el ejemplo abajo:
<p align="center">
.......
</p>
<h1 align="center">
.......
</h1>
Sin embargo, no todos los elementos tienen align="center", que tendrá que utilizar para alinear margin:0 auto para ellos.
Así,
Si desea alinear contenido de un elemento, que debe hacer:
<p style="text-align:center">
.......
</p>
Si desea alinear propio elemento, que debe hacer:
<div style="margin:0 auto;">
.......
</div>
<p style="margin:0 auto;">
.......
</p>
El uso de mayúsculas es importante. :) Las personas tienden a tomar sus preguntas más en serio si se toman el tiempo para escribirlas correctamente. –