Centrar contenido con css

Inicio » Centrar contenido con css

Css centrar div verticalmente y horizontalmente

Flexbox es la forma más moderna de centrar cosas en la página, y hace que el diseño de diseños responsivos sea mucho más fácil de lo que solía ser. Sin embargo, no es totalmente compatible con algunos navegadores antiguos como Internet Explorer.

Centrar elementos verticalmente sin métodos modernos como Flexbox puede ser una verdadera tarea. Aquí repasaremos algunos de los métodos más antiguos para centrar cosas verticalmente primero, y luego le mostraremos cómo hacerlo con Flexbox.

Esto es realmente una combinación de los dos métodos anteriores de Flexbox. Para centrar el elemento(s) hijo(s) horizontal y verticalmente, aplique justify-content: center y align-items: center al elemento padre:

Css center div

Aligning text along the center axis can make a page look organized and symmetrical — it can also draw the visitor’s eye to particular elements on the page. For example, titles, block quotes, and call-to-actions are often centered to disrupt the flow of the document and grab the reader’s attention. That’s why the text CTA below is centered.

Let’s start with an easy example. Say you have a text-only web page and want to center all the text. Then you could use the CSS universal selector (*) or the type selector body to target every element on the page. Then you’d set the text-align property to center.

<h2>How to Center Align Text in CSS</h2><p>This is dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text. This is more dummy text.</p><h2>The Explanation</h2><p>Using either the universal selector or type selector <strong>body</strong> and the CSS text-align property set to “center,” everything on the page will be centered.</p>

Center div vertically

The main trick in this demo is that in the normal flow of elements going from top to bottom, so the margin-top: auto is set to zero. However, an absolutely positioned element acts the same for distribution of free space, and similarly can be centered vertically at the specified top and bottom (does not work in IE7).

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum accumsan tellus purus, et mollis nulla consectetur ac. Quisque id elit at diam convallis venenatis eget sed justo. Nunc egestas enim mauris, sit amet tempor risus ultricies in. Sed dignissim magna erat, vel laoreet tortor bibendum vitae. Ut porttitor tincidunt est imperdiet vestibulum. Vivamus id nibh tellus. Integer massa orci, gravida non imperdiet sed, consectetur ac quam. Nunc dignissim felis id tortor tincidunt, a eleifend nulla molestie. Phasellus eleifend leo purus, vel facilisis massa dignissim vitae. Pellentesque libero sapien, tincidunt ut lorem non, porta accumsan risus. Morbi tempus pharetra ex, vel luctus turpis tempus eu. Integer vitae sagittis massa, id gravida erat. Maecenas sed purus et magna tincidunt faucibus nec eget erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec mollis sem.</div>

Centrar div horizontal y verticalmente

A veces no es el texto lo que hay que centrar, sino el bloque en su conjunto. O, dicho de otro modo: queremos que el margen izquierdo y el derecho sean iguales. La forma de hacerlo es establecer los márgenes en ‘auto’. Esto se utiliza normalmente con un bloque de ancho fijo, porque si el bloque en sí es flexible, simplemente ocupará todo el ancho disponible. He aquí un ejemplo:

El nivel 2 de CSS no tiene una propiedad para centrar cosas verticalmente. Probablemente habrá una en el nivel 3 de CSS (ver más abajo). Pero incluso en CSS2 se pueden centrar los bloques verticalmente, combinando algunas propiedades. El truco está en especificar que el bloque exterior debe ser formateado como una celda de tabla, porque el contenido de una celda de tabla puede ser centrado verticalmente.

El ejemplo siguiente centra un párrafo dentro de un bloque que tiene una altura determinada. Otro ejemplo muestra un párrafo centrado verticalmente en la ventana del navegador, porque está dentro de un bloque que está absolutamente posicionado y es tan alto como la ventana.

El nivel 3 de CSS ofrece otras posibilidades. En este momento (2014), todavía se está discutiendo una buena manera de centrar los bloques verticalmente sin utilizar el posicionamiento absoluto (que puede causar la superposición de texto). Pero si sabes que el texto superpuesto no será un problema en tu documento, puedes usar la propiedad ‘transform’ para centrar un elemento con posicionamiento absoluto. Por ejemplo:

Ir arriba