¿Cómo puedo centrar verticalmente un elemento "div" para todos los navegadores que utilizan CSS?

1498

Quiero centrar divverticalmente con CSS. No quiero tablas o JavaScript, solo CSS puro. Encontré algunas soluciones, pero a todas les falta la compatibilidad con Internet Explorer 6.

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

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

8
  • 27
    @MarcoDemaio ¿La gente no desaprueba constantemente los tablesdiseños aquí?
    Chud37
    21/01/2013 a las 15:35
  • dieciséis
    @ Chud37: depende de lo que tenga que hacer, las tablas para el diseño generalmente no son versátiles y largas para escribir el código, con css puede cambiar fácilmente un diseño de 2 columnas a un diseño de 3/4/5 soles, etc. Pero en este caso es diferente, usar docenas de consejos y trucos CSS para una tarea tan simple que podría lograrse con una mesa perfecta para todos los navegadores, es como intentar ingresar a su casa por la ventana en lugar de usar la puerta. 24/01/2013 a las 19:52
  • En caso de que a la gente no le importe la compatibilidad con navegadores antiguos: davidwalsh.name/css-vertical-center 4 de septiembre de 2014 a las 10:32
  • 1
    css-vertical-center.com hay algunas soluciones con información de compatibilidad del navegador 4 feb 2019 a las 14:24
  • 2
    Aquí hay muchas formas de hacerlo css-tricks.com/centering-css-complete-guide 4 abr 19 a las 12:45
1457

A continuación se muestra la mejor solución integral que podría construir 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;
  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 práctico 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: caja de luz, ventana emergente, etc.

0
299

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;
}
  • Navegador cruzado (incluido Internet Explorer 8 - ¡Internet Explorer 10 sin hacks!)
  • Responsive con porcentajes y min- / max-
  • Centrado independientemente del relleno (¡sin tamaño de caja!)
  • heightdebe ser declarado (ver Altura variable )
  • Configuración recomendada overflow: autopara evitar el desbordamiento de contenido (consulte Desbordamiento)

Fuente: Centrado horizontal y vertical absoluto en CSS

0
289

La forma más sencilla serían las siguientes tres líneas de CSS:

1) posición: relativa;

2) arriba: 50%;

3) transformar: 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>
7
  • 5
    nota: no funciona correctamente si la altura del div exterior se establece con "min-height: 170px" 14 de agosto de 2015 a las 9:10
  • 3
    Interfiere con el índice z 12/11/2016 a las 19:48
  • 6
    no funciona cuando el heightexterior dives 100%. Entonces solo funciona con position: absolute;. 13/04/18 a las 8:01
  • 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! 23 oct 2018 a las 11:02
  • 2
    Esta es la mejor respuesta. Esto es increíblemente simple, se mete con la menor cantidad de trabajo existente y funciona en todo lo que se remonta a IE9, que ya nadie usa. ¡Consigamos más votos a favor para este tipo! 20/06/19 a las 18:40
163

Ahora, la solución Flexbox es una forma muy fácil para los navegadores modernos, así 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>
7
  • 2
    Si tienes una navbar, puedes ajustar la altura usando height: calc(100% - 55px)o cualquiera que sea la altura de tu navbar.
    Adrian
    4 de septiembre de 2017 a las 15:33
  • también tuve que eliminar los márgenes / relleno del cuerpo
    Ben
    21/04/18 a las 22:14
  • Funciona bien con float. Gracias. 15 sep 2019 a las 12:04
  • Tenga en cuenta que esto podría comportarse de forma extraña en los navegadores safari móviles "más nuevos y antiguos". El uso recomendado en lugar de la altura es flexible en la clase .container 29/10/19 a las 13:34
  • YO este funcionó para mí, ¡gracias! 7 dic.20 a las 14:23
138

En realidad, necesita 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>

Aquí está el resultado .

2
  • 4
    es un viejo truco ... 50% superior y el margen superior es la mitad negativa de la altura del div interno
    Manatax
    5 de septiembre de 2013 a las 21:46
  • 37
    está asumiendo que tiene una altura fija para div. no funciona cuando div puede cambiar la altura. 23 de septiembre de 2013 a las 12:22
79

Editar 2020: use esto solo si necesita admitir navegadores antiguos como Internet Explorer 8 (lo cual debe negarse a hacer 😉). Si no es así, use Flexbox .


Este es el método más simple que encontré y lo uso todo el tiempo ( demostración de jsFiddle 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>

El soporte comienza con Internet Explorer 8.

1
  • Al rechazar el soporte para navegadores antiguos, la solución para mí no fue flexbox sino un sistema de cuadrícula. Fue un poco molesto para mí el contenido central en un contenedor que, cuando se vuelve demasiado pequeño en altura, 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. 30 de mayo de 2020 a las 2:51
71

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% */
}
3
  • 4
    Esto funciona muy 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. 19/07/2015 a las 11:05
  • 6
    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%) 8 de ene. De 2017 a las 14:13
  • 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 secundarios. 10 de mayo de 2020 a las 18:30
55

Utilice la propiedad CSS Flexbox align-items para lograr esto.

html, body {
    height: 100%;
}

body {
  display: flex;
  align-items: center;
}
<div>This is centered vertically</div>
1
  • 6
    Note justify-content: centertambién centrará los elementos horizontalmente 6/04/2017 a las 20:04
37

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>

Otra opción es usar el cuadro flexible, verifique el enlace del 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>
4
  • 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, sin importar cuánto contenido haya dentro del DIV centrado, ese DIV se expandirá verticalmente para ajustarse a su contenido. Esa es la belleza de este método. La otra cosa buena es que este método funciona en IE8 / 9/10 en caso de que alguien todavía necesite admitir esos navegadores. 14 de enero de 2015 a las 4:45
  • @ricardozea No quiero ser terco, pero decir que el div centrado se expandirá verticalmente mientras permanece centrado verticalmente es incorrecto. Intentalo. Sé que cuando digo que la altura debe ser "fija", 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. 14/01/15 a las 20:23
  • 1
    @ArmelLarcier Está todo bien. No está mal hermano. Pruébelo: codepen.io/shshaw/pen/gEiDt - Agregue párrafos al cuadro verde;]. Por supuesto, usa Modernizr para lograr el efecto, pero en general es factible. Vi tu respuesta y la publicación de CSS-Tricks.com también, 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, lo dejaría alineado en la parte superior / central y seguiría adelante. 15/01/15 a las 17:24
  • 1
    @ricardozea Bueno, el codepen al que vinculó usa el método "display: table" y marcado adicional, así que no me sorprende. De todos modos, +1 a tu última oración. 15/01/15 a las 17:50
23

La solución más sencilla es la siguiente:

.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>
1
  • 2
    De hecho, el más fácil hasta ahora :) Aunque tuve que establecer los estilos en un div externo, en lugar de en el cuerpo.
    Neeraj
    21/04/18 a las 12:43
22

Desafortunadamente, pero no es sorprendente, la solución es más complicada de lo que uno desearía. Además, desafortunadamente, deberá usar divs adicionales alrededor del div que desea centrar 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 se puede centrar 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:

También existe una técnica para hacer el centrado vertical usando JavaScript. La alineación vertical de contenido con JavaScript y CSS lo demuestra.

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>

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

3
  • ¡Android <4.4 no es compatible align-items: center;! 6/11/2014 a las 13:42
  • De hecho, es compatible con align-items: center; caniuse.com/#search=align-items 2 de junio de 2015 a las 12:51
  • @ 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 la envoltura". 23 de agosto de 2015 a las 1:37
16

Una forma moderna de centrar un elemento verticalmente sería utilizar 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>
14

.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: Centrar una imagen

14

Centrado solo verticalmente

Si no le importa Internet Explorer 6 y 7, puede utilizar una técnica que involucre 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>

¡Vea 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:

  • debe 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>

¡Vea también este violín !

0
11

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>

o usando display: flex;ymargin: 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>

mostrar centro de texto

.parent {
    width: 400px;
    height: 200px;
    background: yellow;
    display: flex;
    align-items: center;
    justify-content:center;
}
<div class="parent">Center</div>

Usando porcentaje (%) de altura y ancho.

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

Aquí es donde siempre voy cuando tengo que volver a este tema .

Para aquellos que no quieren dar el salto:

  1. Especifique el contenedor principal como position:relativeo position:absolute.
  2. Especifique una altura fija en el contenedor secundario.
  3. Coloque position:absolutey top:50%en el contenedor del niño para mover la parte superior hacia el centro del padre.
  4. Establecer 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 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>
8

Acabo de escribir este CSS y para saber más, por favor revise: Este artículo con alineación vertical cualquier cosa con solo 3 líneas de CSS .

.element {
    position: relative;
    top: 50%;
    transform: perspective(1px) translateY(-50%);
}
1
  • 1
    Las transformaciones CSS pueden causar distorsiones en el texto y los bordes (cuando las matemáticas dan como resultado píxeles fraccionarios). 5 de diciembre de 2016 a las 2:26
6

Para los recién llegados, intente:

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

Las tres líneas de código que utilizan transformfuncionan prácticamente en 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).

  1. La 'posición' relativa arruina el estilo si el div actual está en el cuerpo y no tiene un div contenedor. Sin embargo, 'fijo' parece funcionar, pero obviamente corrige el contenido en el centro de la ventana gráfica posición: relativa

  2. 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 renderizó correctamente. Chrome e Internet Explorer (sorprendentemente) renderizaron los cuadros sin necesidad de relleno mozilla sin relleno interior mozilla con relleno

5

Cuadrícula CSS

body, html { margin: 0; }

body {
  display: grid;
  min-height: 100vh;
  align-items: center;
}
<div>Div to be aligned vertically</div>
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>
1
4

Simplemente hágalo: agregue la clase en su 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.

1
  • ¡Woah! Bonito, exactamente lo que necesitaba y no lo había visto antes. 9 de abril a las 14:25
3

No respondiendo por la compatibilidad del navegador, sino también por mencionar la nueva Grid y la no tan nueva función Flexbox.

Red

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 de navegador Flexbox

CSS:

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

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>
1
  • Eso solo es bueno si conoce el ancho / alto del DIV que está tratando de centrar. Esto no es lo que hace la pregunta
    egr103
    19 feb 2013 a las 10:02
3

Creo que es 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/

3

Se puede hacer de dos formas.

body{
left: 50%; 
top:50%; 
transform: translate(-50%, -50%); 
height: 100%; 
width: 100%; 
}

O

Usando flex

body {
    height:100%
    width:100%
    display: flex;
    justify-content: center;
    align-items: center;
}

align-items:center; hace que el contenido se centre verticalmente

justify-content: center;hace que el contenido se centre horizontalmente

2

Especialmente para los divs principales 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>
2
.center{
    display: grid;
    place-items: center;
}
1
  • agregando height: 100%;centros también verticalmente. 27 de mayo a las 3:40 p.m.
2

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