Colocando el elemento <div> en el centro de la pantalla

134

Quiero colocar un elemento <div>(o un <table>) en el centro de la pantalla independientemente del tamaño de la pantalla. En otras palabras, el espacio dejado en 'arriba' e 'fondo' debería ser igual y el espacio dejado en los lados 'derecho' e 'izquierdo' debería ser igual. Me gustaría lograr esto solo con CSS.

He intentado lo siguiente pero no funciona:

 <body>
  <div style="top:0px; border:1px solid red;">
    <table border="1" align="center">
     <tr height="100%">
      <td height="100%" width="100%" valign="middle" align="center">
        We are launching soon!
      </td>
     </tr>
    </table>
  </div>
 </body>

Nota:
De cualquier manera, está bien si el <div>elemento (o <table>) se desplaza con el sitio web o no. Solo quiero que esté centrado cuando se cargue la página.

javascript css html

— sumitir
fuente

1

posible duplicado de Cómo alinear un <div> al medio de la página

— Purag

Hola Purmou, la pregunta que mencionaste para posicionar en el medio de la página, es decir, el espacio igual del lado izquierdo y derecho, ¡no el espacio superior e inferior iguales!

— sumitir

1

posible duplicado de ¿Cuál es la mejor manera de centrar una división verticalmente con CSS?

— desde el

posible duplicado de Cómo centrar un div en un div - horizontalmente?

— bjb568

201

La manera fácil, si tiene un ancho y una altura fijos:

#divElement{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    width: 100px;
    height: 100px;
}

¡No utilices estilos en línea! Aquí hay un ejemplo de trabajo http://jsfiddle.net/S5bKq/ .

— Einstein
fuente

13

Para aquellos que buscan una altura dinámica: stackoverflow.com/questions/396145/…

— pulkitsinghal

1

@ woho87 ¿por qué no usar estilos en línea? por las razones bien conocidas o hay algo más que debería saber para el ejemplo específico?

— Sharky

@KatrinRaimond es por las razones bien conocidas, documentadas aquí stackoverflow.com/questions/2612483/… y aquí webdesign.about.com/od/css/a/aa073106.htm .

— Alex

Pero, al establecer la parte superior del divElement en la unidad '%', el divElement ocupa un espacio vertical a menos que divElement se coloque dentro de un elemento relativo.

— sudip

¿Es posición: fija o posición: absoluta?

— Kurkula

151

Con las transformaciones que se admiten de manera más ubicua en estos días, puede hacerlo sin conocer el ancho / alto de la ventana emergente

.popup {
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

¡Fácil! JSFiddle aquí: http://jsfiddle.net/LgSZV/

Actualización: Consulte https://css-tricks.com/centering-css-complete-guide/ para obtener una guía bastante exhaustiva sobre el centrado de CSS. Agregándolo a esta respuesta, ya que parece tener muchos globos oculares.

— XwipeoutX
fuente

1

Si se está utilizando el contenido de la ventana emergente overflow:auto, el desplazamiento se arruina en IE9. :(

— joescii

2

No tan ubiquos. IE8 todavía representa el 20% del recurso compartido del navegador y no lo admite . Así que solo tome este para IE9 +.

— Fotanus

77

+1 por ser la única solución donde no tienes que especificar alto y ancho o usar Javascript.

— Jan Derk

@fotanus cuando los desarrolladores dejan de admitir IE 9 <los usuarios migrarán o actualizarán su navegador.

— Diego Vieira

@DIegoVieira lamentablemente no es así como funcionan las cosas. Ver la tragedia de los bienes comunes . Por lo tanto, las personas continuarán apoyando IE8 porque no quieren perder este recurso compartido, y las personas continuarán usando porque funciona.

— fotanus

33

Establece el ancho y la altura y estarás bien.

div {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 200px;
  height: 200px;
}

Si desea que las dimensiones del elemento sean flexibles (y no se preocupe por los navegadores heredados), vaya con la respuesta de XwipeoutX .

— Erik Aigner
fuente

1

Esta es la respuesta más limpia y simple y también es amigable para dispositivos móviles . +1

— Rust

22

Funcionará para cualquier objeto. Incluso si no sabes el tamaño:

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

— hombres luminosos
fuente

17

Ahora, es más fácil con HTML 5 y CSS 3:

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            body > div {
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                display: flex;
                justify-content: space-around;
                align-items: center;
                flex-wrap: wrap;
            }
        </style>
    </head>
    <body>
        <div>
            <div>TODO write content</div>
        </div>
    </body>
</html>

— Daniel De León
fuente

12

Si tiene una divposición absoluta fija fija , al 50% desde la parte superior y al 50% a la izquierda y al margen negativo arriba y a la izquierda de la mitad de la altura y el ancho, respectivamente. Ajústese a sus necesidades:

div {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 500px;
    height: 300px;
    margin-left: -250px;
    margin-top: -150px;
}

— elclanrs
fuente

9

Utiliza flex . Mucho más simple y funcionará independientemente de su divtamaño:

.center-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
}

 <html>
 <head>
 </head>
 <body>
 <div class="center-screen">
 I'm in the center
 </div>
 </body>
 </html>

Expandir fragmento

— Caner
fuente

3

Haría esto en CSS:

div.centered {
  position: fixed; 
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

luego en HTML:

<div class="centered"></div>

— Eduardo Lago Aguilar
fuente

0

prueba esto

<table style="height: 100%; left: 0; position: absolute; text-align: center; width: 100%;">
 <tr>
  <td>
   <div style="text-align: left; display: inline-block;">
    Your Html code Here
   </div>
  </td>
 </tr>
</table>

O esto

<div style="height: 100%; left: 0; position: absolute; text-align: center; width: 100%; display: table">
 <div style="display: table-row">
  <div style="display: table-cell; vertical-align:middle;">
   <div style="text-align: left; display: inline-block;">
    Your Html code here
   </div>
  </div>
 </div>
</div>

— Dali
fuente

0

Si hay alguien buscando una solución,

Encontré esto,

¡Es la mejor solución que he encontrado hasta ahora!

div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

http://dabblet.com/gist/2872671

¡Espero que lo disfrutes!

— Christopher Atwood
fuente

0

Otro enfoque flexible y sencillo para mostrar el bloque en el centro: usar la alineación de texto nativo con line-heighty text-align.

Solución:

.parent {
    line-height: 100vh;        
    text-align: center;
}

.child {
    display: inline-block;
    vertical-align: middle;
    line-height: 100%;
}

Y muestra html:

<div class="parent">
  <div class="child">My center block</div>
</div>

Hacemos div.parentpantalla completa, y su hijo único se div.childalinea como texto con display: inline-block.

Ventajas:

flexibilidad, sin valores absolutos
apoyar cambiar el tamaño
funciona bien en dispositivos móviles

Ejemplo simple en JSFiddle: https://jsfiddle.net/k9u6ma8g

— Pavel Shorokhov
fuente

0

Solución alternativa que no utiliza la posición absoluta:
veo muchas respuestas de posición absoluta. No podría usar la posición absoluta sin romper otra cosa. Entonces, para aquellos que tampoco pudieron, esto es lo que hice:
https://stackoverflow.com/a/58622840/6546317 (publicado en respuesta a otra pregunta).

La solución solo se centra en el centrado vertical porque los elementos de mis hijos ya estaban centrados horizontalmente, pero lo mismo podría aplicarse si no pudieras centrarlos horizontalmente de otra manera.

— reddtoric
fuente

-2

prueba esto:

width:360px;
height:360px;
top: 50%; left: 50%;
margin-top: -160px; /* ( ( width / 2 ) * -1 ) */
margin-left: -160px; /* ( ( height / 2 ) * -1 ) */
position:absolute;

— usuario3423956
fuente

2

Esto es efectivamente lo mismo que la respuesta aceptada

— apaul

Sí, pero aquí les explico el funcionamiento del margen superior e izquierda ... alguien no sé ....

— user3423956

1

Entonces es efectivamente lo mismo que la segunda respuesta

— apaul