Comment positionner une div dans le milieu de l'écran lorsque la page est plus grande que l'écran
Salut, j'utilise quelque chose de similaire à ce qui suit pour obtenir un div positionné au milieu de l'écran:
<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>
Cependant, le problème avec ceci est qu'il positionne l'élément au milieu de la page et non l'écran. Donc, si la page est quelques écran haut et je suis en haut de la page (la partie supérieure de la partie est affichée sur l'écran) quand je fais apparaître la div, ce n'est même pas sur l'écran. Vous faites défiler l'écran pour l'afficher.
Quelqu'un Peut-il me dire comment vous le rendrais apparaîtra dans le milieu de l'écran?
14 réponses
Il suffit d'ajouter position:fixed et il le gardera en vue même si vous faites défiler vers le bas. voir à 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;
}
Je pense que c'est une solution 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>Si vous connaissez la taille de l'élément, vous pouvez simplement utiliser margin la propriété:
#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
}
Note que vous devez utiliser la moitié de la largeur et de la hauteur de l'élément
, Mais si vous n'êtes pas sûr de la taille, cela fera l'affaire:
#mydiv {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Utilisation transformer;
<style type="text/css">
#mydiv {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
Solution 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");
Il suffit de mettre 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>
Réponse courte, ajoutez simplement position:fixed et cela résoudra votre problème
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
Cela a fonctionné pour moi
<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>
Eh bien, voici l'exemple de travail pour cela.
Cela gérera la position centrale si vous redimensionnez la page Web ou chargez dans 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>Dans l'exemple ci-dessus chargement de la div sera toujours au centre.
En Espérant que cela vous aidera :)
Dans votre page de script...
$('.a-middle').css('margin-top', function () {
return ($(window).height() - $(this).height()) / 2
});
Utilisez A-classe moyenne dans la Div...
<div class="a-middle">
<!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>Je viens de tester ce code exact sur une page de test et il a parfaitement centré le div sur la page, même avec environ 100 <br /> avant d'essayer de le pousser vers le bas.
Essayez peut-être de vérifier le reste de votre code pour voir si vous avez quelque chose qui surcharge les valeurs de DIV ou qui affecte votre DIV pour causer ces problèmes.
width:30em;
position: static;
margin: 0px auto 0px auto;
padding: 0px;
Pour cela, vous devez détecter la taille de l'écran. Ce n'est pas possible avec CSS ou HTML; vous avez besoin de JavaScript. Voici L'entrée Mozilla Developer Center sur les propriétés de la fenêtre https://developer.mozilla.org/en/DOM/window#Properties
Détecte la hauteur et la position disponibles en conséquence.