css - texto - ¿Cómo centrar verticalmente un div para todos los navegadores?
centrar texto css (30)
Quiero centrar un div verticalmente con CSS. No quiero tablas o JavaScript, sino solo CSS puro. Encontré algunas soluciones, pero a todas les falta el soporte de Internet Explorer 6.
<body>
<div>Div to be aligned vertically</div>
</body>
¿Cómo puedo centrar una div verticalmente en todos los navegadores principales, incluido Internet Explorer 6?
Centrado solo verticalmente
Si no te importa Internet Explorer 6 y 7, puedes usar una técnica que involucre dos contenedores.
El contenedor exterior:
- debe tener
display: table;
El contenedor interior:
- debe tener
display: table-cell; - debe tener
vertical-align: middle;
El cuadro de contenido:
- debe tener
display: inline-block;
¡Puedes agregar cualquier contenido que desees al cuadro de contenido sin importar su ancho o alto!
Manifestación:
body {
margin: 0;
}
.outer-container {
position: absolute;
display: table;
width: 100%; /* This could be ANY width */
height: 100%; /* This could be ANY height */
background: #ccc;
}
.inner-container {
display: table-cell;
vertical-align: middle;
}
.centered-content {
display: inline-block;
background: #fff;
padding: 20px;
border: 1px solid #000;
}
<div class="outer-container">
<div class="inner-container">
<div class="centered-content">
Malcolm in the Middle
</div>
</div>
</div>
Véase también este violín !
Centrado horizontal y verticalmente.
Si desea centrar tanto horizontal como verticalmente, también necesita lo siguiente.
El contenedor interior:
- debe tener
text-align: center;
El cuadro de contenido:
- debe reajustar la alineación horizontal del texto para, por ejemplo
text-align: left;otext-align: right;, a menos que quieras que el texto esté centrado
Manifestación:
body {
margin: 0;
}
.outer-container {
position: absolute;
display: table;
width: 100%; /* This could be ANY width */
height: 100%; /* This could be ANY height */
background: #ccc;
}
.inner-container {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.centered-content {
display: inline-block;
text-align: left;
background: #fff;
padding: 20px;
border: 1px solid #000;
}
<div class="outer-container">
<div class="inner-container">
<div class="centered-content">
Malcolm in the Middle
</div>
</div>
</div>
Véase también este violín !
Solución flexbox
Notas
1. El elemento padre recibe el nombre de la clase.
2. Agregue prefijos de proveedores flexibles si los navegadores compatibles lo requieren.
.verticallyCenter {
display: flex;
align-items: center;
}
<div class="verticallyCenter" style="height:200px; background:beige">
<div>Element centered vertically</div>
</div>
A continuación se muestra la mejor solución general que podría crear para centrar vertical y horizontalmente un cuadro de contenido de altura flexible y ancho fijo. Fue probado y funcionó para versiones recientes de Firefox, Opera, Chrome y Safari.
.outer {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
}
.inner {
margin-left: auto;
margin-right: auto;
width: 400px;
/*whatever width you want*/
}
<div class="outer">
<div class="middle">
<div class="inner">
<h1>The Content</h1>
<p>Once upon a midnight dreary...</p>
</div>
</div>
</div>
Ver un ejemplo de trabajo con contenido dinámico
Construí contenido dinámico para probar la flexibilidad y me encantaría saber si alguien ve algún problema con él. También debería funcionar bien para superposiciones centradas: lightbox, pop-up, etc.
Acabo de escribir este CSS y para obtener más información, lea: Este artículo alinea cualquier cosa con solo 3 líneas de CSS .
.element {
position: relative;
top: 50%;
transform: perspective(1px) translateY(-50%);
}
Ahora la solución flexbox es una forma muy fácil para los navegadores modernos, por lo que te recomiendo esto:
.container{
display: flex;
align-items: center;
justify-content: center;
height: 100%;
background:green;
}
body, html{
height:100%;
}
<div class="container">
<div>Div to be aligned vertically</div>
</div>
Aquí es donde voy cuando tengo que volver a este problema .
Para aquellos que no quieren dar el salto:
- Especifique el contenedor padre como
position:relativeoposition:absolute. - Especifique una altura fija en el contenedor hijo.
- Establecer
position:absoluteytop:50%en el contenedor secundario para mover la parte superior hacia abajo hasta la mitad del elemento primario. - Establezca margin-top: -yy donde yy es la mitad del alto del contenedor secundario para compensar el elemento.
Un ejemplo de esto en código:
<style type="text/css">
#myoutercontainer {position:relative}
#myinnercontainer {position:absolute; top:50%; height:10em; margin-top:-5em}
</style>
...
<div id="myoutercontainer">
<div id="myinnercontainer">
<p>Hey look! I''m vertically centered!</p>
<p>How sweet is this?!</p>
</div>
</div>
Creo que este es el más útil ... proporciona el diseño ''H'' más preciso y es muy sencillo de entender.
El beneficio en este marcado es que define el tamaño de su contenido en un solo lugar -> "Contenido de la página".
Los colores del fondo de la página y sus márgenes horizontales se definen en sus divs correspondientes.
<div id="PageLayoutConfiguration"
style="display: table;
position:absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;
width: 100%; height: 100%;">
<div id="PageBackground"
style="display: table-cell; vertical-align: middle;
background-color: purple;">
<div id="PageHorizontalMargins"
style="width: 100%;
background-color: seashell;">
<div id="PageContent"
style="width: 1200px; height: 620px; margin: 0 auto;
background-color: grey;">
my content goes here...
</div>
</div>
</div>
</div>
Y aquí con CSS separado:
<div id="PageLayoutConfiguration">
<div id="PageBackground">
<div id="PageHorizontalMargins">
<div id="PageContent">
my content goes here...
</div>
</div>
</div>
</div>
#PageLayoutConfiguration{
display: table; width: 100%; height: 100%;
position:absolute; top: 0px; right: 0px; bottom: 0px; left: 0px;
}
#PageBackground{
display: table-cell; vertical-align: middle;
background-color: purple;
}
#PageHorizontalMargins{
style="width: 100%;
background-color: seashell;
}
#PageContent{
width: 1200px; height: 620px; margin: 0 auto;
background-color: grey;
}
Creo que una solución sólida para todos los navegadores sin usar flexbox - "align-items: center"; es una combinación de display: table y vertical-align: middle ;.
CSS
.vertically-center
{
display: table;
width: 100%; /* optional */
height: 100%; /* optional */
}
.vertically-center > div
{
display: table-cell;
vertical-align: middle;
}
HTML
<div class="vertically-center">
<div>
<div style="border: 1px solid black;">some text</div>
</div>
</div>
Desafortunadamente, pero no sorprendentemente, la solución es más complicada de lo que uno desearía. Desafortunadamente, también necesitarás divs adicionales alrededor del div que quieras centrado verticalmente.
Para los navegadores compatibles con estándares como Mozilla, Opera, Safari, etc., debe configurar el div exterior para que se muestre como una tabla y el div interno para que se muestre como una celda de tabla , que luego puede centrarse verticalmente. Para Internet Explorer, debe colocar la división interna absolutamente dentro de la división externa y luego especificar la parte superior como 50% . Las siguientes páginas explican bien esta técnica y también proporcionan algunos ejemplos de código:
- Centrado vertical en CSS
-
Centrado vertical en CSS con altura desconocida (compatible con Internet Explorer 7)(ya no está disponible) - Centrado vertical en CSS con altura desconocida (compatible con Internet Explorer 7) (artículo archivado cortesía de Wayback Machine)
También hay una técnica para hacer el centrado vertical usando JavaScript. La alineación vertical del contenido con JavaScript y CSS lo demuestra.
Después de mucha investigación, finalmente encontré la solución definitiva. Funciona incluso para elementos flotantes. Ver fuente
.element {
position: relative;
top: 50%;
transform: translateY(-50%); /* or try 50% */
}
El siguiente enlace presenta una forma sencilla de hacerlo con solo 3 líneas en su CSS:
Alinea verticalmente cualquier cosa con solo 3 lineas de CSS .
Créditos a : Sebastian Ekström .
Sé que la pregunta ya tiene una respuesta, pero vi la utilidad en el enlace por su simplicidad.
En realidad necesitas dos divs para centrar verticalmente. El div que contiene el contenido debe tener un ancho y alto.
#container {
position: absolute;
top: 50%;
margin-top: -200px;
/* half of #content height*/
left: 0;
width: 100%;
}
#content {
width: 624px;
margin-left: auto;
margin-right: auto;
height: 395px;
border: 1px solid #000000;
}
<div id="container">
<div id="content">
<h1>Centered div</h1>
</div>
</div>
Aquí está el result
Especialmente para divs padres con altura relativa (desconocida), el centrado en la solución desconocida funciona muy bien para mí. Hay algunos ejemplos de código realmente buenos en el artículo.
Fue probado en Chrome, Firefox, Opera e Internet Explorer.
/* This parent can be any width and height */
.block {
text-align: center;
}
/* The ghost, nudged to maintain perfect centering */
.block:before {
content: '''';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
/* The element to be centered, can
also be of any width and height */
.centered {
display: inline-block;
vertical-align: middle;
width: 300px;
}
<div style="width: 400px; height: 200px;">
<div class="block" style="height: 90%; width: 100%">
<div class="centered">
<h1>Some text</h1>
<p>Any other text..."</p>
</div>
</div>
</div>
Esta solución funcionó para mí si tiene un elemento de bloque (por ejemplo). Utilicé los colores para aclarar la solución.
HTML:
<main class="skin_orange">
<p>As you can the the element/box is vertically centered</p>
<div class="bigBox skin_blue">Blue Box</div>
</main>
CSS:
main {
position: relative;
width: 400px;
height: 400px;
}
.skin_orange {
outline: thin dotted red;
background: orange;
}
.bigBox {
width: 150px;
height: 150px;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.skin_blue {
background-color: blue;
}
Este es el método más simple que encontré y lo uso todo el tiempo ( jsFiddle demo aquí )
Gracias a Chris Coyier de CSS Tricks por este artículo .
.v-wrap{
height: 100%;
white-space: nowrap;
text-align: center;
}
.v-wrap:before{
content: "";
display: inline-block;
vertical-align: middle;
width: 0;
/* adjust for white space between pseudo element and next sibling */
margin-right: -.25em;
/* stretch line height */
height: 100%;
}
.v-box{
display: inline-block;
vertical-align: middle;
white-space: normal;
}
<div class="v-wrap">
<article class="v-box">
<p>This is how I''ve been doing it for some time</p>
</article>
</div>
El soporte comienza con IE8.
La forma más sencilla serían las siguientes 3 líneas de CSS:
position: relative;
top: 50%;
transform: translateY(-50%);
A continuación se muestra un ejemplo:
div.outer-div {
height: 170px;
width: 300px;
background-color: lightgray;
}
div.middle-div {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
<div class=''outer-div''>
<div class=''middle-div''>
Test text
</div>
</div>
La respuesta de Billbad solo funciona con un ancho fijo de la div .inner . Esta solución funciona para un ancho dinámico al agregar el atributo text-align: center al .outer div.
.outer {
position: absolute;
display: table;
width: 100%;
height: 100%;
text-align: center;
}
.middle {
display: table-cell;
vertical-align: middle;
}
.inner {
text-align: center;
display: inline-block;
width: auto;
}
<div class="outer">
<div class="middle">
<div class="inner">
Content
</div>
</div>
</div>
La solución más fácil es a continuación:
.outer-div{
width: 100%;
height: 200px;
display: flex;
}
.inner-div{
margin: auto;
text-align:center;
}
<div class="outer-div">
<div class="inner-div">
Hey there!
</div>
</div>
Las tres líneas de código que utilizan la transform funcionan prácticamente en los navegadores modernos e Internet Explorer:
.element{
position: relative;
top: 50%;
transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
}
Estoy agregando esta respuesta ya que encontré algo incompleto en la versión anterior de esta respuesta (y no me permitirá simplemente comentar).
el "relativo" de la posición desordena el estilo si el div actual está en el cuerpo y no tiene un contenedor div. Sin embargo, ''arreglado'' parece funcionar, pero obviamente corrige el contenido en el centro de la ventana gráfica
También utilicé este estilo para centrar algunos divs superpuestos y descubrí que en Mozilla todos los elementos dentro de este div transformado habían perdido sus bordes inferiores. Posiblemente un problema de renderizado. Pero agregar solo el relleno mínimo a algunos de ellos lo representó correctamente. Chrome e Internet Explorer (sorprendentemente) renderizaron las cajas sin necesidad de relleno
Lo hice con esto (cambio ancho, alto, margen superior y margen izquierdo en consecuencia):
.wrapper {
width:960px;
height:590px;
position:absolute;
top:50%;
left:50%;
margin-top:-295px;
margin-left:-480px;
}
<div class="wrapper"> -- Content -- </div>
Lo siguiente está funcionando en mi caso y fue probado en Firefox.
#element {
display: block;
transform: translateY(50%);
-moz-transform: translateY(50%);
-webkit-transform: translateY(50%);
-ms-transform: translateY(50%);
}
La altura del div y la altura del padre son dinámicas. Lo uso cuando hay otros elementos en el mismo padre que es más alto que el elemento objetivo, donde ambos están posicionados horizontalmente en línea.
Los contenidos se pueden centrar fácilmente utilizando flexbox. El siguiente código muestra el CSS para el contenedor dentro del cual se debe centrar el contenido:
.absolute-center {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;
align-items: center;
}
No responde por la compatibilidad del navegador, pero también menciona la nueva cuadrícula y la no tan nueva función de Flexbox.
Cuadrícula
De: Mozilla - Documentación de cuadrícula - Alinear verticalmente
Soporte del navegador: Grid Browser Support
CSS:
.wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
grid-auto-rows: 200px;
grid-template-areas:
". a a ."
". a a .";
}
.item1 {
grid-area: a;
align-self: center;
justify-self: center;
}
HTML:
<div class="wrapper">
<div class="item1">Item 1</div>
</div>
Flexbox
Soporte del navegador: Soporte del navegador Flexbox
CSS:
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
Para centrar la división en una página, verifique el enlace del violín .
#vh {
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.box{
border-radius: 15px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
padding: 25px;
width: 100px;
height: 100px;
background: white;
}
<div id="vh" class="box">Div to be aligned vertically</div>
Otra opción es usar el cuadro de flexión, verifique el enlace de violín .
.vh {
background-color: #ddd;
height: 400px;
align-items: center;
display: flex;
}
.vh > div {
width: 100%;
text-align: center;
vertical-align: middle;
}
<div class="vh">
<div>Div to be aligned vertically</div>
</div>
Otra opción es usar una transformación CSS 3:
#vh {
position: absolute;
top: 50%;
left: 50%;
/*transform: translateX(-50%) translateY(-50%);*/
transform: translate(-50%, -50%);
}
.box{
border-radius: 15px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
padding: 25px;
width: 100px;
height: 100px;
background: white;
}
<div id="vh" class="box">Div to be aligned vertically</div>
Si alguien se preocupa solo por Internet Explorer 10 (y posterior), use flexbox :
.parent {
width: 500px;
height: 500px;
background: yellow;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.centered {
width: 100px;
height: 100px;
background: blue;
}
<div class="parent">
<div class="centered"></div>
</div>
Soporte de Flexbox: http://caniuse.com/flexbox
Solo hazlo: agrega la clase a tu div :
.modal {
margin: auto;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
height: 240px;
}
Y lea este artículo para una explicación. Nota: La Height es necesaria.
Una forma moderna de centrar un elemento verticalmente sería utilizar flexbox .
Necesitas un padre para decidir la altura y un niño para centrar.
El siguiente ejemplo centrará un div al centro dentro de su navegador. Lo importante (en mi ejemplo) es establecer la height: 100% para el body y el html y luego min-height: 100% para su contenedor.
body, html {
background: #F5F5F5;
box-sizing: border-box;
height: 100%;
margin: 0;
}
#center_container {
align-items: center;
display: flex;
min-height: 100%;
}
#center {
background: white;
margin: 0 auto;
padding: 10px;
text-align: center;
width: 200px;
}
<div id=''center_container''>
<div id=''center''>I am center.</div>
</div>
Una más que no puedo ver en la lista:
.Center-Container {
position: relative;
height: 100%;
}
.Absolute-Center {
width: 50%;
height: 50%;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
border: solid black;
}
- Navegador cruzado (incluido Internet Explorer 8 - Internet Explorer 10 sin hacks)
- Responde con porcentajes y min- / max-
- Centrado independientemente del relleno (sin tamaño de caja)
-
heightdebe ser declarada (ver Altura Variable ) - Configuración recomendada de
overflow: autopara evitar la propagación de contenido (ver Desbordamiento)
Yo uso esto. Funciona en Internet Explorer 8 y versiones posteriores:
height:268px - para display:table actúa como min-height.
CSS:
* {
padding: 0;
margin: 0;
}
body {
background: #cc9999;
}
p {
background: #f0ad4e;
}
#all {
margin: 200px auto;
}
.ff-valign-wrap {
display: table;
width: 100%;
height: 268px;
background: #ff00ff;
}
.ff-valign {
display: table-cell;
height: 100%;
vertical-align: middle;
text-align: center;
background: #ffff00;
}
HTML:
<body>
<div id="all">
<div class="ff-valign-wrap">
<div class="ff-valign">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
</div>
</div>
</div>
</body>
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* (x, y) => position */
-ms-transform: translate(-50%, -50%); /* IE 9 */
-webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */
}
.vertical {
position: absolute;
top: 50%;
//left: 0;
transform: translate(0, -50%); /* (x, y) => position */
}
.horizontal {
position: absolute;
//top: 0;
left: 50%;
transform: translate(-50%, 0); /* (x, y) => position */
}
div {
padding: 1em;
background-color: grey;
color: white;
}
<body>
<div class="vertical">Vertically left</div>
<div class="horizontal">Horizontal top</div>
<div class="center">Vertically Horizontal</div>
</body>
Relacionados: Centrar una imagen.