css - texto - Cómo colocar un div en el medio de la pantalla cuando la página es más grande que la pantalla
centrar un div bootstrap (13)
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 de intentarlo y presionarlo hacia abajo.
Tal vez intente verificar el resto de su código para ver si tiene algo que sobreescribe los valores del DIV o que está afectando su DIV para causar estos problemas.
Hola, estoy usando algo similar a lo siguiente para obtener un div colocado 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. Entonces, si la página tiene algunas pantallas altas 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 aparece 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?
Bueno, abajo está 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 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>
En el ejemplo anterior, la carga de div siempre estará en el centro.
Esperando que esto te ayude :)
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>
En la página de script ur ...
$(''.a-middle'').css(''margin-top'', function () {
return ($(window).height() - $(this).height()) / 2
});
Usa una clase media en la Div ...
<div class="a-middle">
Para esto, tendrías 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
Detecte la altura y la posición disponibles en consecuencia.
Respuesta corta, solo agrega position:fixed y eso resolverá tu problema
Si conoce el tamaño del elemento, simplemente puede usar la propiedad de margin :
#mydiv {
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
}
Tenga en cuenta que debe usar la mitad del ancho y la altura 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%);
}
Solo ponga 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>
Usa la transformación
<style type="text/css">
#mydiv {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
Solución de 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");
solo agrega position:fixed y la mantendrá a la vista incluso si te desplazas hacia abajo. verlo 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;
}
<!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>
<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>
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
Esto funcionó para mí