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

Question

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

Hola estoy usando algo similar a lo siguiente para obtener un div posicionado en el medio 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. Así que si la página es un par de pantalla alta 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?

118

css html window center

Author: Hussein, 2011-02-16

Source

14 answers

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>

72

Author: user2684935,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-08-23 00:03:03

Si conoce el tamaño del elemento, simplemente puede usar la propiedad margin:

#mydiv {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -50px; //assuming that #mydiv has the height of 100px
  margin-left: -100px; //assuming that #mydiv has the width of 200px
}

Nota que debe utilizar la mitad del ancho y alto del elemento

Pero si no está seguro del tamaño, esto hará el truco:

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

35

Author: Alex Jolig,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-06-23 07:46:11

Use transform;

<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");

10

Author: Erdogan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-05-27 10:37:37

Solo pon 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

Author: ,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-02-03 20:29:41

Respuesta corta, Simplemente agregue position:fixed y eso resolverá su problema

2

Author: Parth,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-03-08 09:53:27

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

Esto funcionó para mí

2

Author: Abraham,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-03-19 23:27:07

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

1

Author: Maitrey Malve,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-02-15 11:22:56

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 carga en cualquier tamaño.

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

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

Esperando que esto te ayude :)

1

Author: Vikash Pandey,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-06-21 13:59:33

En su página de script...

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

Use a-clase media en el Div...

   <div class="a-middle">

0

Author: Antony Jack,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-04-25 04:57:42

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

0

Author: Lăng Minh,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-01-13 09:03:22

Acabo de probar ese código exacto en una página de prueba y se centró el div perfectamente en la página, incluso con 100 <br /> antes de que para tratar de empujarlo hacia abajo.

Tal vez intente revisar el resto de su código para ver si tiene algo que está sobrescribiendo los valores del DIV o que está afectando a su DIV para causar estos problemas.

-1

Author: Eli,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-02-16 03:20:26

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

-1

Author: LukASh,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-06-21 03:25:55

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

Detecte la altura y la posición disponibles en consecuencia.

-4

Author: Scott Radcliff,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-02-16 03:30:20

score 230 · Accepted Answer

Simplemente agrega position:fixed y lo mantendrá a la vista incluso si te desplazas hacia abajo. ver 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;
}