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?

css html window center Codeur 2
la 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
la 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
la 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
la 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>

la source

5

Essaye celui-là.

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

Chandan Sharma
la 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
la 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
la 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
la 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
la 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
la 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
la 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
la source

-1

UTILISER FLEX

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

ASIR THERANS RAJA M
la 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
la 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
la source

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

Réponses:

Utilisation des positions:

Utilisation de flex: