Centrer un élément position:fixed

Question

Centrer un élément position:fixed

Demandé el 5 de Janvier, 2010: Quand la question a-t-elle été
163226 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Je voudrais faire un position: fixed; Une fenêtre popup centrée sur l'écran avec une largeur et une hauteur dynamiques. J'ai utilisé margin: 5% auto; pour cela. Sans position: fixed; il se centre bien horizontalement, mais pas verticalement. Après avoir ajouté position: fixed; il n'est même pas centré horizontalement.

Voici le jeu complet :

.jqbox_innerhtml {
    position: fixed;
    width: 500px;
    height: 200px;
    margin: 5% auto;
    padding: 10px;
    border: 5px solid #ccc;
    background-color: #fff;
}

<div class="jqbox_innerhtml">
    This should be inside a horizontally
    and vertically centered box.
</div>

Comment centrer cette boîte à l'écran avec CSS ?

Demandé el 5 de Janvier, 2010 par saturngod

Answer 1

5 Réponses

Answer 2

827voto

BalusC Points 498232

Vous devez essentiellement définir top y left a 50% pour centrer le coin supérieur gauche de la division. Vous devez également définir le paramètre margin-top y margin-left à la moitié négative de la hauteur et de la largeur de la division pour déplacer le centre vers le milieu de la division.

Ainsi, à condition qu'un <!DOCTYPE html> (mode standard), cela devrait suffire :

position: fixed;
width: 500px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px; /* Negative half of height. */
margin-left: -250px; /* Negative half of width. */

Ou, si vous ne vous souciez pas du centrage vertical et des anciens navigateurs comme IE6/7, vous pouvez aussi ajouter left: 0 y right: 0 à l'élément ayant un margin-left y margin-right de auto de sorte que l'élément positionné de manière fixe et ayant une largeur fixe sache où commencent ses décalages à gauche et à droite. Dans votre cas donc :

position: fixed;
width: 500px;
height: 200px;
margin: 5% auto; /* Will not center vertically and won't work in IE6/7. */
left: 0;
right: 0;

Encore une fois, cela ne fonctionne que dans IE8+ si vous vous souciez d'IE, et cela ne se centre qu'horizontalement et non verticalement.

Répondu el 5 de Janvier, 2010 par BalusC (498232 Points )

12 votes

J'ai trouvé cette astuce dans css-tricks.com/ . Mais quand je change la largeur et la hauteur, il ne se déplace pas au centre. Oui, je devrais changer les marges gauche et supérieure lorsque je change la hauteur et la largeur.

Commenté el 5 de Janvier, 2010 par saturngod

2 votes

Pour info : cela positionnera correctement les choses au milieu, mais malheureusement vous perdez vos barres de défilement - tout contenu coupé par le viewport ne sera pas accessible, même si vous faites défiler, parce que la position fixe est basée sur le viewport, pas la page. Jusqu'à présent, la seule solution que j'ai trouvée à ce problème est le javascript.

Commenté el 2 de Décembre, 2011 par Groxx

3 votes

Groxx Je pense que vous pouvez placer des barres de défilement à l'intérieur d'un div dans la fenêtre pop-up en utilisant la fonction propriété de débordement .

Commenté el 18 de Novembre, 2012 par David Winiecki

Afficher 8 autres commentaires

Answer 3

517voto

Josh Crozier Points 30040

Je veux créer une boîte popup centrée sur l'écran avec une largeur et une hauteur dynamiques.

Voici une approche moderne pour centrer horizontalement un élément avec une largeur dynamique - elle fonctionne dans tous les navigateurs modernes ; Le soutien peut être vu ici .

Exemple actualisé

.jqbox_innerhtml {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
}

Pour le centrage vertical et horizontal, vous pouvez utiliser la méthode suivante :

Exemple actualisé

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

Vous pouvez également ajouter d'autres propriétés préfixées par le fournisseur (voir les exemples).

Répondu el 14 de Septembre, 2014 par Josh Crozier (30040 Points )

0 votes

Cela perturbe chrome. pour les divs très longs, pour une raison quelconque, il commence à s'affaisser.

Commenté el 12 de Novembre, 2015 par Utilisateur non enregistré

0 votes

@dolphonebubleine Pouvez-vous fournir un exemple ?

Commenté el 12 de Novembre, 2015 par Josh Crozier

1 votes

J'utilise cette approche pour centrer horizontalement une image positionnée de manière fixe dont la largeur est supérieure à la largeur de la fenêtre. Cela fonctionne bien, du moins dans les versions actuelles de Firefox, Chrome, IE 11 et Edge.

Commenté el 2 de Juin, 2016 par jelhan

Afficher 5 autres commentaires

Answer 4

147voto

Will Prescott Points 2451

Ou simplement ajouter left: 0 y right: 0 à votre CSS d'origine, ce qui lui permet de se comporter comme un élément non fixe ordinaire et la technique habituelle de marge automatique fonctionne :

.jqbox_innerhtml
{
  position: fixed;
  width:500px;
  height:200px;
  background-color:#FFF;
  padding:10px;
  border:5px solid #CCC;
  z-index:200;
  margin: 5% auto;
  left: 0;
  right: 0;
}

Notez que vous devez utiliser un code (X)HTML valide. DOCTYPE pour qu'il se comporte correctement dans IE (que vous devriez bien sûr avoir de toute façon !)

Répondu el 5 de Janvier, 2010 par Will Prescott (2451 Points )

2 votes

Dans quel sens ? L'élément parent est l'élément body, qui n'a pas de bordures. Si vous ajoutez des propriétés de bordure à l'élément body ( ?!), il est certain qu'il sera affecté, tout comme la technique des 50%, j'imagine. Je vous assure qu'elle fonctionne parfaitement avec les paramètres donnés, ce qui a été vérifié dans tous les navigateurs que j'ai à portée de main, et elle a l'avantage supplémentaire de ne pas dépendre de la largeur de l'élément.

Commenté el 5 de Janvier, 2010 par Will Prescott

5 votes

Tout ce que j'ai fait, c'est ajouter ces 2 propriétés et un doctype à l'exemple HTML du PO. Cependant, après des tests plus poussés, il semble qu'IE7 (ou 8 en mode compat) soit à l'origine du problème - il semble qu'il ne respecte pas la valeur de la propriété right la propriété si left est également réglé ! ( msdn.microsoft.com/fr/us/library/ note que left y right n'ont qu'un support "partiel" dans IE7). OK, je concède que cette solution n'est pas bonne si le support d'IE7 est important, mais c'est un bon truc à retenir pour l'avenir :)

Commenté el 5 de Janvier, 2010 par Will Prescott

7 votes

Ceci devrait être la réponse acceptée. J'avais deux positions fixes, l'une pour le masque d'opacité, l'autre pour la modale. C'était la seule façon de centrer la modale en position fixe au centre de l'écran. Réponse géniale, qui l'aurait cru ?

Commenté el 22 de Octobre, 2013 par Chris Hawkes

Afficher 8 autres commentaires

Answer 5

36voto

Romulus Urakagi Ts'ai Points 640

Ajoutez un récipient comme :

div {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
}

Ensuite, mettez votre boîte dans cette division qui fera le travail.

Edit : comme mentionné dans les commentaires, le contenu interne doit être défini à display: inline-block en supposant qu'il y a deux divs comme :

    <div class="outer">
        <div class="inner">
             content goes here
        </div>
    </div>

Alors le CSS pour l'intérieur doit être :

    .outer {
        position: fixed;
        text-align: center;
        left: 0;
        right: 0;
    }
    .inner {
        display: inline-block;
    }

Avec la division extérieure ayant un left: 0; right:0; y text-align: center ceci alignera la div interne centrée, sans spécifier explicitement la largeur de la div interne.

Répondu el 14 de Juillet, 2012 par Romulus Urakagi Ts'ai (640 Points )

0 votes

"text-align : center" n'a pas fonctionné pour moi dans le centrage de la div interne.

Commenté el 5 de Janvier, 2013 par nima

2 votes

La boîte interne doit être display: inline-block pour que cela fonctionne. (D'autres valeurs d'affichage peuvent également fonctionner, telles que table .)

Commenté el 19 de Juillet, 2013 par Brilliand

0 votes

Une meilleure approche du css mentionné ci-dessus serait d'ajouter margin:auto; et en changeant la largeur en width:50% o width:400px . alors le contenu peut être du texte pur, des éléments de bloc ou des éléments en ligne.

Commenté el 9 de Octobre, 2013 par Joshua Burns

Afficher 1 autres commentaires

Answer 6

5voto

jatinder Points 41

left: 0;
right: 0;

Ne fonctionnait pas sous IE7.

Changé en

left:auto;
right:auto;

A commencé à fonctionner mais dans les autres navigateurs, il ne fonctionne plus ! J'ai donc utilisé cette méthode pour IE7 ci-dessous

if ($.browser.msie && parseInt($.browser.version, 10) <= 7) {                                
  strAlertWrapper.css({position:'fixed', bottom:'0', height:'auto', left:'auto', right:'auto'});
}

Répondu el 22 de Décembre, 2011 par jatinder (41 Points )

0 votes

Pourriez-vous modifier votre réponse pour y inclure la solution complète ?

Commenté el 10 de Avril, 2018 par Flimm

0 votes

Cela ne fonctionnera pas sans une marge automatique sur les côtés gauche et droit.

Commenté el 11 de Avril, 2018 par RoM4iK

Centrer un élément position:fixed

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Centrer un élément position:fixed

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: