¿Cómo centrar verticalmente un div para todos los navegadores?

https://stackoverflow.com/questions/396145

29-08-2019
|

Pregunta

quiero centrar un div verticalmente con CSS.No quiero tablas ni JavaScript, solo CSS puro.Encontré algunas soluciones, pero a todas les falta compatibilidad con Internet Explorer 6.

<body>
    <div>Div to be aligned vertically</div>
</body>

¿Cómo puedo centrar un div verticalmente en todos los principales navegadores, incluido Internet Explorer 6?

Solución

A continuación se muestra la mejor solución todo-en torno podría construir a vertical y horizontalmente centrar una de ancho fijo, altura flexibles cuadro de contenido. Fue probado y trabajando para las últimas versiones de Firefox, Opera, Chrome y Safari.

.outer {
  display: table;
  position: absolute;
  top: 0;
  left: 0;
  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 Dynamic contenido

he construido en algún contenido dinámico para poner a prueba la flexibilidad y me gustaría saber si alguien ve ningún problema con él. Se debe trabajar bien para los recubrimientos se centraron también -., Caja de luz emergente, etc.

Otros consejos

Uno más 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;
}

Cross-browser (incluyendo Internet Explorer 8 - Internet Explorer 10 sin cortes)
Responsive con porcentajes y min- / max -
Centrado independientemente de acolchado (sin caja de tamaño!)
height debe ser declarada (ver altura variable )
establecer overflow: auto para evitar que desborde el contenido recomendado (ver desbordamiento)

_{Fuente: absoluta horizontal y centrado vertical en CSS}

La forma más sencilla sería la siguiente 3 líneas de CSS:

1) Posición: relative;

2) la parte superior: 50%;

3) transformar: translateY (-50%);

El siguiente es 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>

En realidad se necesitan dos divs para el centrado vertical. El div que contiene el contenido debe tener una anchura y altura.

#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 resultar

Ahora la solución FlexBox es una manera muy fácil para los navegadores modernos, por lo que recomiendo esto para usted:

.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>

Este es el método más simple que encontré y lo uso todo el tiempo ( jsFiddle demostración aquí )

Gracias Chris Coyier de trucos CSS para este artículo .

html, body{
  height: 100%;
  margin: 0;
}
.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>

Soporte comienza con IE8.

Después de mucha investigación finalmente encontré la solución definitiva. Funciona incluso para los elementos flotantes. Ver código

.element {
    position: relative;
    top: 50%;
    transform: translateY(-50%); /* or try 50% */
}

Para centrar el div en una página, comprobar el enlace 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 utilizar el cuadro de flexión, comprobar 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 utilizar un CSS 3 transform:

#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>

solución Flexbox

Notas
1. El elemento padre se le da el nombre de la clase.
2. Añadir los prefijos de proveedores flex si lo requiere el soportados los navegadores .

.verticallyCenter {
  display: flex;
  align-items: center;
}

<div class="verticallyCenter" style="height:200px; background:beige">
    <div>Element centered vertically</div>
</div>

Desafortunadamente, pero no es sorprendente, la solución es más complicada de lo que uno desearía.Desafortunadamente, también necesitarás usar divs adicionales alrededor del div que deseas centrar verticalmente.

Para navegadores compatibles con estándares como Mozilla, Opera, Safari, etc.debe configurar el div externo para que se muestre como un mesa y el div interno que se mostrará como un celda de tabla - que luego se puede centrar verticalmente.Para Internet Explorer, es necesario posición el div interior absolutamente dentro del div exterior y luego especifique el arriba 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 vivo)
Centrado vertical en CSS con altura desconocida (compatible con Internet Explorer 7) (Artículo archivado cortesía de Wayback Machine)

También existe una técnica para realizar el centrado vertical utilizando JavaScript. Alineación vertical de contenido con JavaScript y CSS lo demuestra.

Si alguien se preocupa para Internet Explorer 10 (y posterior), el uso 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>

apoyo Flexbox: http://caniuse.com/flexbox

La solución más fácil es a continuación:

.outer-div{
  width: 100%;
  height: 200px;
  display: flex;
  border:1px solid #000;
}
.inner-div{
  margin: auto;
  text-align:center;
  border:1px solid red;
}

<div class="outer-div">
  <div class="inner-div">
    Hey there!
  </div>
</div>

Una manera moderna para centrar un elemento vertical sería utilizar flexbox .

Es necesario un padre para decidir la altura y un niño de centro.

En el ejemplo siguiente se centrará un div al centro dentro de su navegador. Lo que es importante (en mi ejemplo) es establecer height: 100% a body y html y luego min-height: 100% a 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>

de centrado sólo vertical

Si no se preocupan por Internet Explorer 6 y 7, se puede utilizar una técnica que consiste en dos contenedores.

El recipiente exterior:

debe tener display: table;

El recipiente interior:

debe tener display: table-cell;
debe tener vertical-align: middle;

El cuadro de contenido:

debe tener display: inline-block;

Puede añadir cualquier contenido que desea el cuadro de contenido sin preocuparse por su anchura o altura!

Demostració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>

esta violín !

de centrado horizontal y verticalmente

Si desea centrar tanto horizontal como verticalmente, también es necesario lo siguiente.

El recipiente interior:

debe tener text-align: center;

El cuadro de contenido:

debe volver a ajustar la horizontal de alineación de textos, por ejemplo, a text-align: left; o text-align: right;, a menos que desee el texto que estar centrado

Demostració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>

esta violín !

.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>

Relacionado: centro de una imagen

Esto es siempre donde ir cuando tengo que volver a este tema .

Para los que no quieren dar el salto:

Especificar el contenedor primario como position:relative o position:absolute.
Especificar una altura fija en el contenedor secundario.
Establecer position:absolute y top:50% en el contenedor secundario para mover la parte superior hasta la mitad de los padres.
Establecer margin-top: -YY donde yy es la mitad de la altura del contenedor secundario para compensar el artículo.

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>

Me acabo de escribir este CSS y saber más, por favor vaya a través de: Este artículo con vertical de alinear cualquier cosa con sólo 3 líneas de CSS .

.element {
    position: relative;
    top: 50%;
    transform: perspective(1px) translateY(-50%);
}

Usar la propiedad de flexión de CSS.

.parent {
    width: 400px;
    height:200px;
    background: blue;
    display: flex;
    align-items: center;
    justify-content:center;
}

.child {
    width: 75px;
    height: 75px;
    background: yellow;
}

<div class="parent">
    <div class="child"></div>
</div>

o por utilizando display: flex; y margin: auto;

.parent {
    width: 400px;
    height:200px;
    background: blue;
    display: flex;
}

.child {
    width: 75px;
    height: 75px;
    background: yellow;
    margin:auto;
}

<div class="parent">
    <div class="child"></div>
</div>

centro muestran texto

.parent {
    width: 400px;
    height: 200px;
    background: yellow;
    display: flex;
    align-items: center;
    justify-content:center;
}

<div class="parent">Center</div>

Uso de porcentaje (%) de altura y anchura.

.parent {
    position: absolute;
    height:100%;
    width:100%;
    background: blue;
    display: flex;
    align-items: center;
    justify-content:center;
}

.child {
    width: 75px;
    height: 75px;
    background: yellow;
}

<div class="parent">
    <div class="child"></div>
</div>

La respuesta de Billbad sólo funciona con un ancho fijo de la div .inner. Esta solución funciona para una anchura dinámica mediante la adición de la text-align: center atributo a la div .outer.

.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>

En el siguiente enlace presenta una forma sencilla de hacerlo con sólo 3 líneas en el CSS:

Alineación vertical cualquier cosa con sólo 3 líneas de CSS .

Créditos a :. Sebastian Ekström

Sé que la pregunta ha sin embargo ya una respuesta vi utilidad en el enlace por su sencillez.

No responder a la compatibilidad del navegador, sino también a hablar de la nueva cuadrícula y los no tan nueva característica Flexbox.

Red

De: Mozilla - Rejilla Documentación - Alinear verticalmente Div

Soporte para el navegador: respaldo de red Navegador

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 para el navegador: FlexBox Apoyo navegador

CSS:

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;

Las tres líneas de código usando transform funciona 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 añadiendo esta respuesta ya que encontré alguna imperfección en la versión anterior de esta respuesta (y desbordamiento de pila no me permite simplemente comentario).

'posición' líos pariente hasta el peinado si el div actual está en el cuerpo y no tiene ningún contenedor div. Sin embargo 'fijo' parece funcionar, pero es evidente que fija el contenido en el centro de la ventana gráfica
También he utilizado este estilo para el centrado de algunos divs de superposición y se encontró que en Mozilla todos los elementos dentro de este div transformado habían perdido sus bordes inferiores. Posiblemente un problema de renderizado. Pero añadiendo simplemente el relleno mínimo para algunos de ellos prestados correctamente. Chrome e Internet Explorer (sorprendentemente) prestan las cajas sin necesidad de acolchado

Creo que una solución sólida para todos los navegadores sin necesidad de utilizar FlexBox - "align-elementos: center;" es una combinación de pantalla: mesa y vertical-align:. media;

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>

‣demo: https://jsfiddle.net/6m640rpp/

CSS cuadrícula

body, html { margin: 0; }

body {
  display: grid;
  min-height: 100vh;
  align-items: center;
}

<div>Div to be aligned vertically</div>

lo hice con esta (anchura de cambio, la altura, el margen-top y el margen-izquierda en consecuencia):

.wrapper {
    width:960px;
    height:590px;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-295px;
    margin-left:-480px;
}

<div class="wrapper"> -- Content -- </div>

Especialmente para divs padres con altura relativa (desconocido), el de centrado en el desconocido solución funciona muy bien para mí. Hay algunos ejemplos de código muy agradable 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>

Hay un truco que descubrí recientemente: Es necesario utilizar top 50% y luego haces un translateY(-50%)

.outer-div {
  position: relative;
  height: 150px;
  width: 150px;
  background-color: red;
}

.centered-div {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  background-color: white;
}

<div class='outer-div'>
  <div class='centered-div'>
    Test text
  </div>
</div>

Para los recién llegados por favor intente

display: flex;
align-items: center;
justify-content: center;

Me parece más útil .. da disposición la más exacta 'H' y es muy sencillo de entender.

La ventaja en este margen de beneficio es que se define el tamaño de su contenido en un solo lugar -> "PageContent".
Los colores de fondo de la página y sus márgenes horizontales están definidos en sus correspondientes divs.

<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;
}

Los contenidos pueden ser fácilmente centrados mediante el uso de FlexBox. El código siguiente muestra el CSS para el recipiente interior que necesita ser centrada en 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;
}

Licenciado bajo: CC-BY-SA con atribución

No afiliado a StackOverflow