Comment positionner un div au milieu de l'écran lorsque la page est plus grande que l'écran

141

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 place l'élément au milieu de la page et non à l'écran. Donc, si la page est à quelques écrans de haut et que je suis en haut de la page (la partie supérieure de la partie est affichée à l'écran) lorsque je fais apparaître le div, ce n'est même pas sur l'écran. Vous devez faire défiler vers le bas pour le voir.

Quelqu'un peut-il me dire comment vous le feriez apparaître au milieu de l'écran?

— Codeur 2
source

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 écrase les valeurs de DIV ou qui affecte votre DIV pour causer ces problèmes.

— Eli

269

ajoutez simplement position:fixedet il le gardera en vue même si vous faites défiler vers le bas. voir sur 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
source

1

Vous sauvez la vie .. Une solution simple fonctionne bien même si l’élément a une échelle de transformation appliquée ..

— Vinnie

91

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>

Développer l'extrait

— user2684935
source

7

cette approche est bien meilleure que la réponse approuvée

— Viacheslav Dobromyslov

2

J'ai adoré celui-ci, mais cela fonctionne-t-il dans un navigateur "plus ancien"?

— BernaMariano

14

Utilisez transform;

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

— Erdogan
source

5

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

5

Essaye celui-là.

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

— Chandan Sharma
source

1

Je pense que celui-ci est plus utile car vous n'avez pas besoin d'appliquer de style à l'élément parent.

— canbax

3

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

Cela a fonctionné pour moi

— Abraham
source

2

Bien que cela puisse être techniquement correct, vous souhaitez inclure une brève description de la raison pour laquelle cela résout le problème du contexte

— drneel

2

Réponse courte, il suffit d'ajouter position:fixedet cela résoudra votre problème

— Parth
source

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
source

La question m'a été posée dans l'interview "comment alignez-vous le centre div de l'écran?"

— Maitrey Malve

1

Eh bien, ci-dessous est l'exemple de travail pour cela.

Cela gérera la position centrale si vous redimensionnez la page Web ou la chargez dans n'importe quelle taille.

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

Développer l'extrait

Dans l'échantillon ci-dessus, le div de chargement sera toujours au centre.

En espérant que cela vous aidera :)

— Vikash Pandey
source

1

Deux façons de positionner une balise au milieu de l'écran ou sa balise parent:

Utilisation des positions:

Définissez la balise parent positionsur relative(si la balise cible a une balise parent), puis définissez le style de balise cible comme ceci:

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

Utilisation de flex:

Le style de balise parent devrait ressembler à ceci:

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

— Alex Jolig
source

0

Dans votre page de script ...

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

Utilisez une classe moyenne dans la Div ...

   <div class="a-middle">

— Antony Jack
source

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

Développer l'extrait

— Lăng Minh
source

-1

UTILISER FLEX

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

— ASIR THERANS RAJA M
source

Cela centre le contenu sur l'élément ou la page parent, pas sur l'écran.

— Sean le

-2

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

— LukASh
source

Ajouter une explication

— Pankaj Makwana

-4

Pour cela, vous devrez 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 du Mozilla Developer Center sur les propriétés de la fenêtre https://developer.mozilla.org/en/DOM/window#Properties

Détectez la hauteur disponible et la position en conséquence.

— Scott Radcliff
source