web-dev-qa-db-fra.com

Centrer une position: élément fixe

Je souhaite créer un menu contextuel position: fixed; centré sur l'écran avec une largeur et une hauteur dynamiques. J'ai utilisé margin: 5% auto; pour cela. Sans position: fixed;, il est bien centré horizontalement, mais pas verticalement. Après avoir ajouté position: fixed;, il ne se centre même pas 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>

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

csscss-positioncentering
378
saturngod

En gros, vous devez définir top et left sur 50% pour centrer le coin supérieur gauche de la div. Vous devez également définir les paramètres margin-top et margin-left sur la moitié négative de la hauteur et de la largeur de la div pour déplacer le centre vers le milieu de la div.

Ainsi, à condition qu'un <!DOCTYPE html> (mode standard), ceci 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 aussi ajouter left: 0 et right: 0 à l'élément ayant un margin-left et margin-right sur auto, de sorte que l'élément à position fixe ayant une largeur fixe sache où commencent ses décalages gauche et droit. 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 que horizontalement et non verticalement.

539
BalusC

Je souhaite 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; support peut être vu ici .

Exemple mis à jour 

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

Vous pouvez utiliser les éléments suivants pour le centrage vertical et horizontal:

Exemple mis à jour 

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

Vous voudrez peut-être ajouter d'autres propriétés préfixées par le fournisseur (voir les exemples).

266
Josh Crozier

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

127
Will Prescott

Ajouter un conteneur comme:

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

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

21
Romulus Urakagi Ts'ai

Il suffit d'ajouter:

left: calc(-50vw + 50%);
right: calc(-50vw + 50%);
margin-left: auto;
margin-right: auto;
14
Bob

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

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

Et au lieu de calculer la taille du popup, et moins la moitié en haut, javascript redimensionne le popupContainer pour remplir tout l'écran ...

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

En tout cas ça marche :)

5
BjarkeCK
left: 0;
right: 0;

Ne fonctionnait pas sous IE7.

Changé en

left:auto;
right:auto;

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'});
}
4
jatinder

Vous pouvez en principe l'envelopper dans un autre div et définir sa position sur 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>
2
Abdulla Dlshad

Pour fixer la position, utilisez ceci: -

div {
    position: fixed;
    left: 68%;
    transform: translateX(-8%);
}
1
HeadAndTail

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

.class_name{
    width: 50vw;
    height: 50vh;
    border: 1px solid red;
    position: fixed;
    left: 25vw;top: 25vh;   
}
1
Aseem
#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 s'agir d'un élément de largeur, hauteur ou sans largeur différente. tous sont centrés.

1
praffessorr

Un possible réponse :

<!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>
0
Martin Vahi

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

width: calc (width: 100% - largeur quel que soit le décalage du centre)

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

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