Centrar un elemento con CSS

Si desarrollas para la web es más que común querer centrar elementos en la pantalla, ¿verdad? Imaginemos que tenemos la siguiente div:

<div class="container"> 
    <p>Aquí tenemos un texto</p> 
<div> 

Si quieres centrar el texto dentro de la div, puedes hacer:

.container { text-align: center; }

Este código funciona para centrar cualquier elemento que sea inline (puedes ver cuáles son inline) o inline-block.

Ah, pero ¿y si no quiero centrar el contenido, sino la div en la pantalla? La forma en que lo hicimos no funcionará. En este caso, básicamente tenemos que hacer dos cosas:

Dar un tamaño a la div y establecer los márgenes izquierdo y derecho en auto:

.container { 
    width: 700px; 
    margin-left: auto;
    margin-right: auto; 
}

Este código funciona para cualquier elemento block.

Si te interesa este tema, aquí en Alura tenemos capacitaciones de front-end, para principiantes y para aquellos que ya son desarrolladores web. En ellas, verás cómo programar en Javascript, HTML y CSS para construir sitios web.