Centrer une position: élément fixe

439

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

Voici l'ensemble 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>
Développer l'extrait

Comment centrer cette case à l'écran avec CSS?

css css-position centering saturngod
la source

Réponses:

606

Vous devez essentiellement ensemble topet leftà 50%centrer le coin supérieur gauche de la div. Vous devez également définir le margin-topet margin-leftla moitié négative de la hauteur et de la largeur du div pour déplacer le centre vers le milieu du div.

Ainsi, pourvu d'un <!DOCTYPE html>(mode standard), cela devrait faire:

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 tels que IE6 / 7, vous pouvez également ajouter left: 0et right: 0à l'élément ayant un margin-leftet margin-rightde auto, de sorte que l'élément positionné fixe ayant une largeur fixe sache où se trouvent sa gauche et les décalages à droite commencent. 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 se centre uniquement horizontalement et non verticalement.

BalusC
la source
8
J'ai trouvé cette astuce dans css-tricks.com/… . Mais quand je change la largeur et la hauteur, ça ne bouge pas au centre. Oui, je devrais changer la marge gauche et le haut lorsque je change la hauteur et la largeur.
saturngod
2
Pour info: cela positionnera correctement les choses au milieu, mais malheureusement vous perdez vos barres de défilement - tout contenu coupé par la fenêtre ne sera pas accessible, même si vous faites défiler, car la position fixe est basée sur la fenêtre, pas la page. Jusqu'à présent, la seule solution que j'ai trouvée est le javascript.
Groxx
3
Groxx Je pense que vous pouvez mettre des barres de défilement dans un div dans la fenêtre pop-up en utilisant la propriété overflow .
David Winiecki
1
De plus, pour celui-ci, vous devez connaître la largeur de l'élément.
Hector Ordonez
2
ah. nm si c'est le cas, je veux dire bien sûr que la taille du navigateur sera dynamique, je ne sais pas pourquoi c'était dans la question. au lieu de cela, je pensais qu'il voulait dire que les dimensions du popup devaient être dynamiques. c'est le cas pour moi, donc j'utilise transform: translate (-50%, -50%); fonctionne très bien, sauf pas sur IE8.
nuits
324

Je veux créer une boîte contextuelle 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 - cela fonctionne dans tous les navigateurs modernes; le support peut être vu ici .

Exemple mis à jour

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

Pour le centrage vertical et horizontal, vous pouvez utiliser les éléments suivants:

Exemple mis à jour

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

Josh Crozier
la source
1
J'utilise cette approche pour centrer horizontalement une image fixe dont la largeur est supérieure à la largeur de la fenêtre et fonctionne au moins correctement dans les versions actuelles de Firefox, Chrome, IE 11 et Edge.
jelhan
1
Dans mes tests, cela fonctionne très bien (derrière les préfixes), Win10 Edge 14, Win7 IE9 +, Win10 Chrome, OSX Chrome, iPad4 Chrome & Safari, Android 4.4+ Chrome. Seul échec pour moi était Android 4.0 où la traduction n'a pas eu lieu.
danjah
2
@ahnbizcad, cela fonctionne dans les navigateurs de bureau comme Chrome 61, Safari 11 et FireFox 65, mais pas dans Chrome 61 sur Android 6, la réponse acceptée fonctionne dans tous les navigateurs.
Erik Barke
5
Cela rend les images floues dans Chrome.
Tomasz P. Szynalski
1
En quelque sorte, seule approche qui fonctionnait correctement sur tous les navigateurs avec mon img. Merci beaucoup!
Kugelfisch
136

Ou ajoutez simplement left: 0et right: 0à votre CSS d'origine, ce qui le fait se comporter de la même manière qu'un élément normal non fixe et la technique de marge automatique habituelle 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 HTML (X) valide DOCTYPEpour qu'il se comporte correctement dans IE (que vous devriez bien sûr avoir de toute façon ..!)

Will Prescott
la source
2
Dans quel sens? L'élément parent est l'élément corps, qui n'a pas de bordure. Si vous avez ajouté des propriétés de bordure au corps (?!), Alors cela serait affecté, tout comme la technique des 50% que j'imagine. Je vous assure que cela fonctionne très bien avec les paramètres donnés, juste vérifié dans chaque navigateur que j'ai à portée de main, et a l'avantage supplémentaire de ne pas dépendre de la largeur de l'élément.
Will Prescott
5
Tout ce que j'ai fait a été d'ajouter ces 2 propriétés et un doctype à l'exemple HTML de l'OP. Cependant, lors de tests supplémentaires, il semble que IE7 (ou 8 en mode compat) soit le problème - il semble qu'il ne respecte pas la valeur de la rightpropriété si elle leftest également définie! ( msdn.microsoft.com/en-us/library/… note que leftet rightne prend en charge que "partiellement" dans IE7). OK, je concède que cette solution n'est pas bonne si le support IE7 est important, mais une excellente astuce à retenir pour l'avenir :)
Will Prescott
7
ce devrait être la réponse acceptée. J'avais deux positions fixes, l'une pour le masque d'opacité, l'autre pour le modal. c'était la seule façon de centrer le modal à position fixe au centre de l'écran. Réponse impressionnante qui aurait pensé?
Chris Hawkes
3
Je suis d'accord, cela devrait être la réponse acceptée. Il fonctionne également parfaitement dans un design réactif, car il ne dépend pas de la largeur.
Hector Ordonez
7
Je suggérerais de simplifier la réponse, car une partie du CSS n'est pertinente que pour le PO. Tout ce dont vous avez besoin est la position: fixe; gauche: 0; à droite: 0; marge: 0 auto; .
Hector Ordonez
23

Ajoutez un conteneur comme:

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

Ensuite, mettez votre boîte dans ce div fera le travail.

Romulus Urakagi Ts'ai
la source
"text-align: center" n'a pas fonctionné pour moi en centrant le div interne.
nima
2
La boîte interne doit être display: inline-blockpour que cela fonctionne. (Certaines autres valeurs d'affichage peuvent également fonctionner, telles que table.)
Brilliand
une meilleure approche du css mentionné ci-dessus serait d'ajouter margin:auto;et de changer la largeur à width:50%ou width:400px. le contenu peut alors être du texte droit, des éléments de bloc ou des éléments en ligne.
Joshua Burns
20

Ajoutez simplement:

left: calc(-50vw + 50%);
right: calc(-50vw + 50%);
margin-left: auto;
margin-right: auto;
Bob
la source
1
Cela ne fonctionne pas position: fixed, c'est de cela qu'il s'agit. Si je me trompe, veuillez modifier votre réponse pour inclure un extrait de code exécutable.
Flimm
1
cela fonctionne très bien avec une position fixe.
Phuhui
1
Il fonctionne avec position: fixed, à condition de définir l'élément max-widthou widthsur l'élément.
Js Lim
7 
#modal {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

à l'intérieur, il peut y avoir n'importe quel élément de largeur, hauteur ou sans diffenet. tous sont centrés.

praffessorr
la source
5

Cette solution ne vous oblige pas à définir une largeur et une hauteur pour votre div popup.

http://jsfiddle.net/4Ly4B/33/

Et au lieu de calculer la taille de la fenêtre contextuelle, et moins la moitié vers le haut, javascript redimensionne le popupContainer pour remplir tout l'écran ...

(100% hauteur, ne fonctionne pas lors de l'utilisation de display: table-cell; (qui est nécessaire pour centrer quelque chose verticalement)) ...

De toute façon ça marche :)

BjarkeCK
la source
4 
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! Donc utilisé de cette façon pour IE7 ci-dessous

if ($.browser.msie && parseInt($.browser.version, 10) <= 7) {                                
  strAlertWrapper.css({position:'fixed', bottom:'0', height:'auto', left:'auto', right:'auto'});
}
jatinder
la source
Cela vous dérange-t-il de modifier votre réponse pour inclure la solution complète?
Flimm
Cela ne fonctionnera pas sans une marge automatique sur les côtés gauche et droit.
RoM4iK
2

Vous pouvez essentiellement l' envelopper dans une autre divet mettre son positionà fixed.

.bg {
  position: fixed;
  width: 100%;
}

.jqbox_innerhtml {
  width: 500px;
  height: 200px;
  margin: 5% auto;
  padding: 10px;
  border: 5px solid #ccc;
  background-color: #fff;
}
<div class="bg">
  <div class="jqbox_innerhtml">
    This should be inside a horizontally and vertically centered box.
  </div>
</div>
Développer l'extrait

Abdulla Dlshad
la source
2

J'ai utilisé vw(largeur de la fenêtre d'affichage) et vh(hauteur de la fenêtre d'affichage). viewport est votre écran entier. 100vwest la largeur totale de vos écrans et 100vhla hauteur totale.

.class_name{
    width: 50vw;
    height: 50vh;
    border: 1px solid red;
    position: fixed;
    left: 25vw;top: 25vh;   
}
Aseem
la source
1

Pour fixer la position, utilisez ceci:

div {
    position: fixed;
    left: 68%;
    transform: translateX(-8%);
}
HeadAndTail
la source
3
Veuillez expliquer pourquoi votre solution fonctionnerait pour la question publiée.
Shekhar Chikara
0

Une réponse possible :

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS Center Background Demo</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }

        div.centred_background_stage_1 {
            position: fixed;
            z-index:(-1 );
            top: 45%;
            left: 50%;
        }

        div.centred_background_stage_2 {
            position: relative;
            left: -50%;

            top: -208px;
            /* % does not work.
               According to the
               http://reeddesign.co.uk/test/points-pixels.html
               6pt is about 8px

               In the case of this demo the background
               text consists of three lines with
               font size 80pt.

               3 lines (with space between the lines)
               times 80pt is about
               ~3*(1.3)*80pt*(8px/6pt)~ 416px

               50% from the 416px = 208px
             */

            text-align: left;
            vertical-align: top;
        }

        #bells_and_wistles_for_the_demo {
            font-family: monospace;
            font-size: 80pt;
            font-weight: bold;
            color: #E0E0E0;
        }

        div.centred_background_foreground {
            z-index: 1;
            position: relative;
        }
    </style>
</head>
<body>
<div class="centred_background_stage_1">
    <div class="centred_background_stage_2">
        <div id="bells_and_wistles_for_the_demo">
            World<br/>
            Wide<br/>
            Web
        </div>
    </div>
</div>
<div class="centred_background_foreground">
    This is a demo for <br/>
    <a href="http://stackoverflow.com/questions/2005954/center-element-with-positionfixed">
        http://stackoverflow.com/questions/2005954/center-element-with-positionfixed
    </a>
    <br/><br/>
    <a href="http://www.starwreck.com/" style="border: 0px;">
        <img src="./star_wreck_in_the_perkinnintg.jpg"
             style="opacity:0.1;"/>
    </a>
    <br/>
</div>
</body>
</html>
Martin Vahi
la source
Cela semble fonctionner, même si cela nécessite que vous connaissiez déjà la largeur et la hauteur de l'élément.
Flimm
0

Essayez d'utiliser ceci pour les éléments horizontaux qui ne se centreront pas correctement.

width: calc (width: 100% - width else else is off centing it )

Par exemple, si votre barre de navigation latérale mesure 200 pixels:

width: calc(100% - 200px);
Robert Ross
la source
0

J'utilise juste quelque chose comme ça:

.c-dialogbox {
    --width:  56rem;
    --height: 32rem;

    position: fixed;

    width:  var(--width);
    height: var(--height);
    left:   calc( ( 100% - var(--width) ) / 2 );
    right:  calc( ( 100% - var(--width) ) / 2 );
    top:    calc( ( 100% - var(--height) ) / 2 );
    bottom: calc( ( 100% - var(--height) ) / 2 );
}

Il centre la boîte de dialogue à la fois horizontalement et verticalement pour moi, et je peux utiliser différentes largeurs et hauteurs pour s'adapter à différentes résolutions d'écran pour le rendre réactif, avec des requêtes multimédias.

Pas une option si vous devez toujours fournir un support pour les navigateurs où les propriétés personnalisées CSS ou calc()ne sont pas prises en charge (vérifiez sur caniuse.)

Fabien Snauwaert
la source
0

Celui-ci a fonctionné le mieux pour moi:

    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
Flafy
la source
-13

La seule solution infaillible consiste à utiliser la table align = center comme dans:

<table align=center><tr><td>
<div>
...
</div>
</td></tr></table>

Je ne peux pas croire que les gens du monde entier gaspillent ces quantités copieuses en un temps idiot pour résoudre un problème aussi fondamental que le centrage d'un div. La solution CSS ne fonctionne pas pour tous les navigateurs, la solution jquery est une solution de calcul logiciel et n'est pas une option pour d'autres raisons.

J'ai perdu trop de temps à plusieurs reprises pour éviter d'utiliser la table, mais l'expérience m'a dit d'arrêter de la combattre. Utilisez le tableau pour centrer div. Fonctionne tout le temps dans tous les navigateurs! Ne vous inquiétez plus.

Cheong
la source
11
Cela ne répond pas du tout à la question. Il n'y a pas d'équivalent non CSS à position:fixed.
Brilliand