Cómo colocar un div en el medio de la pantalla cuando la página es más grande que la pantalla

141

Hola, estoy usando algo similar a lo siguiente para colocar un div en el centro de la pantalla:

<style type="text/css"> 
#mydiv {
    position:absolute;
    top: 50%;
    left: 50%;
    width:30em;
    height:18em;
    margin-top: -9em; /*set to a negative number 1/2 of your height*/
    margin-left: -15em; /*set to a negative number 1/2 of your width*/
    border: 1px solid #ccc;
    background-color: #f3f3f3;
}

</style>


<div id="mydiv">Test Div</div>

Sin embargo, el problema con esto es que coloca el elemento en el medio de la página, no en la pantalla. Entonces, si la página tiene una pantalla de alto y estoy en la parte superior de la página (la parte superior de la parte se muestra en la pantalla) cuando hago que aparezca el div, ni siquiera está en la pantalla. Tienes que desplazarte hacia abajo para verlo.

¿Puede alguien decirme cómo lo haría aparecer en el medio de la pantalla?

— Codificador 2
fuente

Acabo de probar ese código exacto en una página de prueba y centró el div perfectamente en la página, incluso con unos 100 <br />antes para intentar empujarlo hacia abajo. Tal vez intente verificar el resto de su código para ver si tiene algo que sobrescribe los valores del DIV o que está afectando su DIV para causar estos problemas.

— Eli

269

simplemente agregue position:fixedy lo mantendrá a la vista incluso si se desplaza hacia abajo. Véalo en http://jsfiddle.net/XEUbc/1/

#mydiv {
    position:fixed;
    top: 50%;
    left: 50%;
    width:30em;
    height:18em;
    margin-top: -9em; /*set to a negative number 1/2 of your height*/
    margin-left: -15em; /*set to a negative number 1/2 of your width*/
    border: 1px solid #ccc;
    background-color: #f3f3f3;
}

— Hussein
fuente

1

Usted es un salvavidas ... La solución simple funciona bien incluso si el elemento tiene una escala de transformación aplicada ...

— Vinnie

91

Creo que esta es una solución simple:

<div style="
    display: inline-block;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 200px;
    height: 100px;
    margin: auto;
    background-color: #f3f3f3;">Full Center ON Page
</div>

Expandir fragmento

— usuario2684935
fuente

77

este enfoque es mucho mejor que la respuesta aprobada

— Viacheslav Dobromyslov

2

Me encantó este, pero ¿funciona en el navegador "más antiguo"?

— BernaMariano

14

Usar transformación;

<style type="text/css">
    #mydiv {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
</style>

Solución Javascript:

var left = (screen.width / 2) - (530 / 2);
var top = (screen.height / 2) - (500 / 2);
var _url = 'PopupListRepair.aspx';
window.open(_url, self, "width=530px,height=500px,status=yes,resizable=no,toolbar=no,menubar=no,left=" + left + ",top=" + top + ",scrollbars=no");

— Erdogan
fuente

5

Sólo hay que poner margin:auto;

#mydiv {
    margin:auto;
    position:absolute;
    top: 50%;
    left: 50%;
    width:30em;
    height:18em;
    margin-top: -9em; /*set to a negative number 1/2 of your height*/
    margin-left: -15em; /*set to a negative number 1/2 of your width*/
    border: 1px solid #ccc;
    background-color: #f3f3f3;
}

<div id="mydiv">Test Div</div>

5

Prueba este.

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

— Chandan Sharma
fuente

1

Creo que este es más útil porque no necesita aplicar ningún estilo al elemento padre.

— Canbax

3

position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;

Esto funciono para mi

— Abrahán
fuente

2

Si bien esto puede ser técnicamente correcto, desea incluir una breve descripción de por qué esto resuelve el problema de contexto

— drneel

2

Respuesta corta, solo agregue position:fixedy eso resolverá su problema

— Parth
fuente

1

<html>
<head>
    <style type="text/css">

#mydiv {
    position:absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width:100px;
    height:200px;
    margin:auto;
    border: 1px solid #ccc;
    background-color: #f3f3f3;
}
    </style>
</head>
<body>
<div id="mydiv">Maitrey</div>
</body>
</html>

— Maitrey Malve
fuente

La pregunta se me hizo en la entrevista "¿cómo alineas el centro div de la pantalla?"

— Maitrey Malve

1

Bueno, a continuación se muestra el ejemplo de trabajo para esto.

Esto manejará la posición central si cambia el tamaño de la página web o la carga en anysize.

<!DOCTYPE html>
<html>
<head>
<style>
.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
  border: 10px solid #dcdcdc;
  border-radius: 50%;
  border-top: 10px solid #3498db;
  width: 30px;
  height: 30px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 1s linear infinite;  
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
</head>
<body>


<div class="loader" style="display:block"></div>

</body>
</html>

Expandir fragmento

En la muestra anterior div de carga siempre estará en el centro.

Esperando que esto te ayude :)

— Vikash Pandey
fuente

1

Dos formas de colocar una etiqueta en el medio de la pantalla o su etiqueta principal:

Usando posiciones:

Establezca la etiqueta principal positionen relative(si la etiqueta de destino tiene una etiqueta principal) y luego configure el estilo de la etiqueta de destino de esta manera:

#center {
  ...  
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Usando flex:

El estilo de la etiqueta principal debería verse así:

#parent-tag {
  display: flex;
  align-items: center;
  justify-content: center;
}

— Alex Jolig
fuente

0

En su página de script ...

    $('.a-middle').css('margin-top', function () {
        return ($(window).height() - $(this).height()) / 2
    });

Usa una clase media en el Div ...

   <div class="a-middle">

— Antony Jack
fuente

-1

<!DOCTYPE html>
<html>
<head>
<style>
.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
  border: 10px solid #dcdcdc;
  border-radius: 50%;
  border-top: 10px solid #3498db;
  width: 30px;
  height: 30px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 1s linear infinite;  
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
</head>
<body>


<div class="loader" style="display:block"></div>

</body>
</html>

Expandir fragmento

— Lăng Minh
fuente

-1

UTILIZANDO FLEX

display: flex;
height: 100%;
align-items: center;
justify-content: center;

— ASIR THERANS RAJA M
fuente

Esto centra el contenido en el elemento o página principal, no en la pantalla.

— Sean

-2

width:30em;
position: static;
margin: 0px auto 0px auto;
padding: 0px;

— LukASh
fuente

Agregue alguna explicación

— Pankaj Makwana

-4

Para esto, tendría que detectar el tamaño de la pantalla. Eso no es posible con CSS o HTML; Necesitas JavaScript. Aquí está la entrada del Centro de desarrolladores de Mozilla en las propiedades de la ventana https://developer.mozilla.org/en/DOM/window#Properties

Detecta la altura y posición disponibles en consecuencia.

— Scott Radcliff
fuente