1368

Quiero centrar divverticalmente con CSS. No quiero tablas ni JavaScript, sino solo CSS puro. Encontré algunas soluciones, pero a todas ellas les falta el soporte de Internet Explorer 6.

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

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

css cross-browser alignment vertical-alignment centering Burak Erdem
fuente

25

@MarcoDemaio ¿No la gente constantemente desaprueba los tablesdiseños aquí?

Chud37

14

@ Chud37: depende de lo que tenga que hacer, las tablas para el diseño generalmente no son versátiles y largas para escribir código, con css puede cambiar fácilmente un diseño de 2 cols en un diseño de 3/4/5 soles, etc. Pero en este caso es diferente, usar docenas de consejos y trucos de CSS para una tarea tan simple que podría lograrse con una tabla de navegador cruzada perfecta, es como intentar ingresar a su casa a través de la ventana en lugar de usar la puerta.

Marco Demaio

En caso de que a la gente no le importe la compatibilidad con navegadores antiguos: davidwalsh.name/css-vertical-center

Karolis Šarapnickis

1

css-vertical-center.com hay algunas soluciones con información de compatibilidad del navegador

EscapeNetscape

2

Aquí hay muchas maneras de hacerlo css-tricks.com/centering-css-complete-guide

Michael Yurin

1375

A continuación se muestra la mejor solución completa que podría construir para centrar vertical y horizontalmente un cuadro de contenido de altura fija y ancho fijo . Fue probado y funciona para versiones recientes 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>

Expandir fragmento

Ver un ejemplo de trabajo con contenido dinámico

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

Billbad
fuente

Sin un DIV externo "absoluto", cualquier contenido de la página anterior empujará todo el bloque hacia abajo. Esto lo hace más independiente del contenido de otra página.

Billbad

99

.outer {position:absolute;width:100%;height:100%}No es necesario, están aquí simplemente para demostrar. Todo lo que necesitamos es display:table, si alguien está confundido como yo.

rostro

Me di cuenta de que esto necesita el 99% para evitar las barras de desplazamiento. Más importante, esto funciona solo con los dos primeros divs, digamos keep .outere middleignorar claramente el .innerestilo y su estilo. No sé cuál es el punto margin-left, margin-rightestablecer en auto ya que eso no centra el elemento horizontalmente.

user10089632

Eliminar width: 100%;y agregar margin: 0 autoa .outerpermite también un ancho variable.

rococó

@ user10089632 No, no se trata de ancho o alto sino de posición. top: 0; left 0;falta, al menos en Chrome, que establece el valor predeterminado en 1.

Michał Woliński

280

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

Cross-browser (incluido Internet Explorer 8 - ¡Internet Explorer 10 sin hacks!)
Responsivo con porcentajes y min- / max-
Centrado independientemente del relleno (¡sin tamaño de caja!)
heightdebe declararse (ver Altura Variable )
Configuración recomendada overflow: autopara evitar el derrame de contenido (ver Desbordamiento)

_{Fuente: Centrado absoluto horizontal y vertical en CSS}

Yisela
fuente

77

Esto funcionó para mí, pero necesitaba tener un ancho y una altura fijos en cromo por alguna razón

Ryan Knell,

1

Gracias. Necesitaba una solución donde no necesitaba calcular la altura o el ancho de px y esto funcionó perfectamente.

GFoley83

8

Gran solución, especialmente porque no necesita un padre div

Luca Steeb

1

Esto se estira si la altura no es fija, aparte de eso: buena solución

Bart Burg

Si tiene un ancho y una altura que no son del 100%, usemargin: auto;

Charles L.

253

La forma más sencilla sería las siguientes 3 líneas de CSS:

1) posición: relativa;

2) superior: 50%;

3) transformar: traducirY (-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>

Expandir fragmento

DrupalFever
fuente

44

nota: no funciona correctamente si la altura del div externo se establece con "min-height: 170px"

Bart Burg

3

Interfiere con el índice z

ripper234

44

no funciona cuando heightde exterior dives 100%. Entonces solo funciona con position: absolute;.

Arch Linux Tux el

1

Primero encontré esta solución en otro lugar, pero felicitaciones adicionales a esta respuesta en particular por mencionar la -webkit-transformvariante en particular, que necesitaba para que este método funcionara en phantomjs ... ¡Terminé horas de lucha, así que gracias!

drmrbrewer

2

Esta es la mejor respuesta. Esto es increíblemente simple, se mete con la menor cantidad de trabajo y funciones existentes en todo, desde IE9, que ya nadie usa. ¡Consigamos a este tipo más votos a favor!

Nick Steele

136

En realidad, necesitas dos div para el centrado vertical. El div que contiene el contenido debe tener un ancho y un 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>

Expandir fragmento

Aquí está el resultado.

Vadim Ovchinnikov
fuente

44

es un viejo truco ... 50% superior y el margen superior negativo la mitad de la altura del div interno

Manatax

34

se supone que tienes una altura fija para div. no funciona cuando div puede cambiar la altura.

Andre Figueiredo

116

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>

Expandir fragmento

Santosh Khalse
fuente

1

Si tienes un navbar, puedes ajustar la altura usando height: calc(100% - 55px)o lo que sea la altura de tu altura navbar.

Adrian

También tuve que eliminar los márgenes / relleno del cuerpo

Ben

Funciona bien con float. Gracias.

Amir A. Shabani

Tenga en cuenta que esto podría comportarse de manera extraña en los navegadores de safari móvil "más nuevos". El uso recomendado en lugar de la altura es flexible en la clase .container

Nine Magics

78

Editar 2020: solo use esto si necesita admitir navegadores antiguos como IE8 (que debe negarse a hacer 😉). Si no, use flexbox.

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 .

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>

Expandir fragmento

El soporte comienza con IE8.

Armel Larcier
fuente

Al rechazar el soporte para navegadores antiguos, la solución para mí no era flexbox sino un sistema de cuadrícula. Fue un poco molesto para mí centrar el contenido en un contenedor que, cuando su altura es demasiado pequeña, necesitaba mostrar la barra de desplazamiento, y el contenido centrado estaba perdiendo el área de desplazamiento con todos los demás métodos. En el contenedor solo uso: {display: grid; alinear elementos: centro; } Espero que esto ayude a alguien.

tomasofen

63

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% */
}

ymakux
fuente

44

Esto funciona realmente bien, siempre que recuerde que el elemento contenedor debe tener una altura implícita o explícita; jsfiddle.net/14kt53un Un problema menor para aquellos que son relativamente nuevos en CSS.

Martyn Shutt

66

De todas las respuestas, ¡esta es la más simple! ¡Espero que otros también vean tu respuesta! ¡Gracias! Por cierto, 50%funcionó para mí (no -50%)

The Codesee

Eso fue increible. Después de horas de búsqueda, este funcionó para mí. Tuve que usar translateY (50%). Estoy seguro de por qué, pero funcionó. En mi caso, el padre fue creado por AEM Forms Engine, y solo puedo controlar ciertos elementos hijos.

tarekahf

41

Solución Flexbox

html, body { margin: 0; height: 100%; }

body {
  display: flex;
  align-items: center;
}

<div>This is centered vertically</div>

Expandir fragmento

Reggie Pinkham
fuente

3

La nota justify-content: centertambién centrará los elementos horizontalmente

Peter Berg

36

Para centrar el div 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>

Expandir fragmento

Otra opción es usar el cuadro flexible, 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>

Expandir fragmento

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>

Expandir fragmento

Nerdroid
fuente

3

@ ArmelLarcier Eso es incorrecto. Las unidades relativas son porcentajes %, emsy rems. Los valores absolutos o fijos son píxeles o puntos. A lo que te refieres es "solo funciona con una altura declarada". Sin embargo, aunque este método descrito por Moes requiere una altura, cuando lo declaras en unidades relativas, el porcentaje es el mejor, no importa cuánto contenido esté dentro del DIV centrado, ese DIV se expandirá verticalmente para ajustarse a su contenido. Esa es la belleza de este método. Lo otro bueno es que este método funciona en IE8 / 9/10 en caso de que alguien todavía necesite soportar esos navegadores.

Ricardo Zea

@ricardozea No me refiero a ser terco, pero decir que el div centrado se expandirá verticalmente mientras permanezca centrado verticalmente es incorrecto. Intentalo. Sé que cuando digo que la altura debe ser "fija", que no es la palabra correcta. De hecho, es relativo a su padre. De todos modos, creo que el método de Chris Coyer tiene más sentido, vea mi respuesta stackoverflow.com/a/21919578/1491212 Es compatible con IE8 Y funciona en un elemento sin dimensiones especificadas.

Armel Larcier

1

@ ArmelLarcier Está todo bien. No está mal hermano. Pruébelo: codepen.io/shshaw/pen/gEiDt - Agregue párrafos al cuadro verde;]. Por supuesto, utiliza Modernizr para lograr el efecto, pero en general es factible. También vi su respuesta y la publicación de CSS-Tricks.com, pero ese método no me hace feliz, usa un marcado adicional y el CSS es demasiado detallado. Creo que la mejor solución es usar flexbox o la transform: translate(-50%, -50%);técnica. Para IE8, simplemente lo dejaría alineado arriba / centro y seguir adelante.

Ricardo Zea

1

@ricardozea Bueno, el codepen al que se vinculó utiliza el método "display: table" y un marcado adicional, así que no me sorprende. De todos modos, +1 a tu última oración.

Armel Larcier

23

La solución más fácil está 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>

Expandir fragmento

Varsha Dhadge
fuente

2

De hecho, el más fácil hasta ahora :) Aunque, tuve que establecer los estilos a un div-externo, en lugar de cuerpo.

baburao

21

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

Para los navegadores que cumplen con los estándares como Mozilla, Opera, Safari, etc., debe configurar el div externo 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 el div interno absolutamente dentro del div externo 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á activo)
Centrado vertical en CSS con altura desconocida (compatible con Internet Explorer 7) (Artículo archivado por 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.

sids
fuente

20

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>

Expandir fragmento

Soporte de Flexbox: http://caniuse.com/flexbox

Bravedick
fuente

¡Android <4.4 no es compatible align-items: center;!

André Fiedler

En realidad, admite elementos de alineación: centro; caniuse.com/#search=align-items

t.mikael.d

@ t.mikael.d Es posible que desee echar un vistazo más de cerca a esa tabla. Para Android <4.4, dice "Solo es compatible con la antigua especificación de flexbox y no es compatible con el ajuste".

Nathan Osman el

15

Una forma moderna de centrar un elemento verticalmente sería usar flexbox .

Necesita un padre para decidir la altura y un niño para centrar.

El siguiente ejemplo centrará un div en el centro dentro de su navegador. Lo que es importante (en mi ejemplo) es fijar height: 100%a bodyy htmly 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>

Expandir fragmento

Marwelln
fuente

14

Centrado solo verticalmente

Si no le importa Internet Explorer 6 y 7, puede usar una técnica que involucra dos contenedores.

El contenedor exterior:

debería tener display: table;

El contenedor interior:

debería tener display: table-cell;
debería tener vertical-align: middle;

El cuadro de contenido:

debería tener display: inline-block;

¡Puede agregar cualquier contenido que desee al cuadro de contenido sin preocuparse por 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>

Expandir fragmento

Ver también este violín !

Centrado horizontal y verticalmente

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

El contenedor interior:

debería tener text-align: center;

El cuadro de contenido:

debería reajustar la alineación horizontal del texto a, por ejemplo , text-align: left;o text-align: right;, a menos que desee 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>

Expandir fragmento

Ver también este violín !

John Slegers
fuente

13

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

Expandir fragmento

Relacionado: Centrar una imagen

antílope
fuente

10

Esto es siempre a donde voy cuando tengo que volver a este problema .

Para aquellos que no quieren dar el salto:

Especifique el contenedor principal como position:relativeo position:absolute.
Especifique una altura fija en el contenedor secundario.
Establezca position:absolutey top:50%en el contenedor secundario para mover la parte superior hacia abajo hasta el centro del elemento primario.
Establezca margin-top: -yy donde yy es la mitad de la altura del contenedor secundario para compensar el elemento hacia arriba.

Un ejemplo de esto en el 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>

Ninx
fuente

9

Usando la propiedad flex 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>

Expandir fragmento

o usando display: flex;ymargin: auto;

Mostrar fragmento de código

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

Expandir fragmento

mostrar centro de texto

Mostrar fragmento de código

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

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

Expandir fragmento

Usando porcentaje (%) de altura y ancho.

Mostrar fragmento de código

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

Expandir fragmento

Deepu Reghunath
fuente

8

Acabo de escribir este CSS y para saber más, vaya a: Este artículo con vertical alinee cualquier cosa con solo 3 líneas de CSS .

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

Sanjib Debnath
fuente

1

Las transformaciones CSS pueden causar distorsiones en el texto y los bordes (cuando las matemáticas dan como resultado píxeles fraccionarios).

Nathan K

5

CSS Grid

body, html { margin: 0; }

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

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

Expandir fragmento

Andy Hoffman
fuente

5

Para los recién llegados por favor intente

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

Usman I
fuente

1

Agregue un fragmento de pila que muestre cómo este código CSS alinea verticalmente a div.

Heretic Monkey

esto también funciona <div style="display:flex"><div style="margin:auto">Inner</div></div>

idrisadetunmbi

Encontré esta maravillosa explicación de alinear elementos y justificar el contenido. Debe leer: stackoverflow.com/questions/42613359/…

Usman I

4

La respuesta de Billbad solo funciona con un ancho fijo del .innerdiv. Esta solución funciona para un ancho dinámico agregando el atributo text-align: centeral .outerdiv.

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

Expandir fragmento

Ruwen
fuente

¡Interesante! Estoy usando una técnica casi idéntica! -> stackoverflow.com/questions/396145/…

John Slegers

4

El uso de las tres líneas de código transformfunciona 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 Stack Overflow no me permitirá simplemente comentar).

El 'posición' relativa 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 usé 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 mínimo relleno a algunos de ellos lo hizo correctamente. Chrome e Internet Explorer (sorprendentemente) renderizaron las cajas sin necesidad de relleno

MandarK
fuente

3

El siguiente enlace presenta una forma simple de hacerlo con solo 3 líneas en su CSS:

Alinee verticalmente cualquier cosa con solo 3 líneas de CSS .

Créditos a : Sebastian Ekström .

Sé que la pregunta ya tiene una respuesta, sin embargo, vi la utilidad en el enlace por su simplicidad.

Hicaro
fuente

3

Sin responder por la compatibilidad del navegador, sino también mencionar la nueva cuadrícula y la no tan nueva función Flexbox.

Cuadrícula

De: Mozilla - Documentación de cuadrícula - Alinear Div verticalmente

Soporte de navegador: Soporte de navegador de cuadrícula

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

ctekk
fuente

3

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>

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

Martin Wantke
fuente

2

Lo hice con esto (cambie el ancho, la altura, el margen superior y el 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>

Netuddki
fuente

Eso solo es bueno si conoce el ancho / alto del DIV que está tratando de centrar. Esta no es la pregunta

egr103

2

El contenido puede centrarse fácilmente mediante el uso de 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;
}

Mahendra Liya
fuente

2

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

Expandir fragmento

Ruwen
fuente

2

Solo hazlo: agrega la clase en tu div:

.modal {
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  height: 240px;
}

Y lea este artículo para obtener una explicación. Nota: Heightes necesario

Anshul
fuente

2

Hay un truco que descubrí recientemente: necesitas usar top 50%y luego haces untranslateY(-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>

Expandir fragmento

Melchia
fuente

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

Respuestas:

Solución Flexbox

Centrado solo verticalmente

El contenedor exterior:

El contenedor interior:

El cuadro de contenido:

Manifestación:

Centrado horizontal y verticalmente

El contenedor interior:

El cuadro de contenido:

Manifestación:

CSS Grid

CSS

HTML