CSS horizontal centrage fixe div?

#menu {
    position: fixed;
    width: 800px;
    background: rgb(255, 255, 255); /* The Fallback */
    background: rgba(255, 255, 255, 0.8);
    margin-top: 30px;
}

Je sais que cette question est un million de fois là-bas, cependant je ne peux pas trouver une solution à mon cas.
J'ai un div, qui devrait être fixé sur l'écran, même si la page défile il faut toujours rester CENTRÉ au milieu de l'écran!

La div doit avoir 500px largeur, doit être 30px loin du sommet (margin-top), devrait être centrée horizontalement dans le milieu de la page pour que tous les navigateurs tailles et ne doit pas bouger lorsque vous faites défiler le reste de la page.

Est-ce possible?

Voir aussi stackoverflow.com/questions/17069435/...

InformationsquelleAutor matt | 2010-07-01

164
```
left: 50%;
margin-left: -400px; /* Half of the width */
```
- il ne fonctionne pas comme prévu lorsque vous redimensionnez la fenêtre du navigateur.
- Êtes-vous sûr? Il semble bien à moi sur redimensionner. Je pense que ce -400 est à cause de la largeur de la div d' 800.
- Comment êtes-vous capable de voir le nom d'utilisateur affiché comme Bahodir alors que je le vois simplement comme user126284
- Parce que le nom d'utilisateur a changé au cours des 6 derniers mois (sans doute parce que le compte a été supprimé).
- Je vous remercie, vous m'avez sauvé une fois de plus! (Je suis en utilisant, en outre, de IE boycott)
- fonctionne lorsque la largeur définie, mais si j'utilise un rembourrage pour ajuster le texte donné par l'utilisateur, alors???
- -1 Cela ne fonctionne que si l'élément que vous centrage a une largeur exacte qui ne change jamais. Le Iron96 réponse est beaucoup mieux.
- Comme celui que la question se pose au sujet de?
- cela est d'aucun avantage par rapport à l'aide d'une transformée et a limité l'usage. Une transformation est la meilleure et est une meilleure pratique. Dans un réactif de l'âge c'est une mauvaise pratique pour enseigner aux gens à coder en dur ces valeurs. Je suis d'accord qu'en 2010, c'était la bonne réponse, il n'est tout simplement pas plus.
- Complètement d'accord - c'est PAS une solution! Jamais coder en dur quelque chose de cette manière. -1
- Cette réponse est de plus de la moitié d'une décennie, la prise en charge du navigateur pour de meilleures alternatives a été terrible.
- Peu importe, les nouveaux visiteurs doivent voir que c'est pas la façon de faire les choses maintenant. PS - vous répondu à cette en février à la défendre - c'est un facteur de motivation pour moi downvoting et informer les utilisateurs que c'est absolument horrible pour accomplir cette tâche.
- J'ai voté NON parce que c'était une mauvaise réponse pour son époque - il était une bonne réponse, mais parce qu'il ne l'est plus, et le plus élevé suivant répondre à des besoins de toute l'aide qu'il peut obtenir pour être considérée comme la meilleure réponse MAINTENANT. Quentin: je pense que ce serait une bonne idée de modifier dans un commentaire à cet effet dans la réponse elle-même - je ne puis me défaire de mes bas de vote.
InformationsquelleAutor Quentin
438

Les réponses ici sont obsolètes. Maintenant, vous pouvez facilement utiliser un CSS3 transformer sans coder en dur une marge. Cela fonctionne sur tous les éléments, y compris les éléments avec pas la largeur ou la dynamique de la largeur.

Centre Horizontal:
```
left: 50%;
transform: translateX(-50%);
```
Centre Vertical:
```
top: 50%;
transform: translateY(-50%);
```
À la fois horizontale et verticale:
```
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
```
La compatibilité n'est pas un problème: http://caniuse.com/#feat=transforms2d
- J'ai mis en place votre réponse, avec un élément déplaçable, et un problème est venu. J'ai posté la question ici: stackoverflow.com/questions/34073485/...
- +1 Cette réponse démontre un problème avec stackoverflow: Vieux des réponses qui ont été bons pour la journée et ont été, à juste titre, accepté peut s'asseoir fièrement sur le haut en donnant l'impression qu'ils sont toujours appropriés, tandis que de nombreuses réponses pour un nouveau monde, comme celui-ci, pour lutter contre la cote.
- 100% d'accord. Cette réponse devrait être le nouveau accepté de répondre. Junior devs ne devrait même pas voir l'actuel accepté de répondre!
- s'il vous plaît accepter cette place. Faites défiler jusqu'à présent longtemps pour voir cela.
- Ce qui fait un des effets de flou dans la zone d'ombre dans les éléments de contenu.
- Oui, Chrome incorrectement brouille le contenu qui est transformé. Le texte est également floue. Mais c'est la seule solution pour avoir un élément fixe centré sans coder en dur et en utilisant wrapper éléments. Si vous n'avez pas de soins sur les événements de pointeur de l'arrière-plan, vous pouvez obtenir le même effet avec un plein écran wrapper et flexbox, ou @salomvary la solution ci-dessous.
- Ils devraient supprimer l'on a accepté la réponse de la fonctionnalité et de la liste des réponses uniquement par le vote. Ensuite, les votes doivent expirent après un an ou deux 😉
- Ce semble un max de largeur sur le centré élément qui n'existait pas auparavant. Je suis en utilisant ce à centre fixe bootstrap panneau, et c'est de forcer la largeur plus petite qu'avant. Est-il un moyen de surmonter cela? Le contenu est dynamique (boutons d'action de mon formulaire), donc je ne peux pas coder en dur la largeur.
- Ce bon travail, mais l'élément que j'essaie de centre a déjà une animation, ce animer la translateX(-50%)...
InformationsquelleAutor Maciej Krawczyk

Si vous utilisez inline-blocks est une option que je recommande cette approche:

.container { 
    /* fixed position a zero-height full width container */
    position: fixed;
    top: 0; /* or whatever position is desired */
    left: 0;
    right: 0;
    height: 0;
    /* center all inline content */
    text-align: center;
}

.container > div {
    /* make the block inline */
    display: inline-block;
    /* reset container's center alignment */
    text-align: left;
}

J'ai écrit un post à ce sujet ici: http://salomvary.github.com/position-fixed-horizontally-centered.html

10x, cela a très bien fonctionné pour moi w/o ayant pour code dur tous les numéros pour width ou quelque chose, contrairement à @Quentins répondre

InformationsquelleAutor salomvary

26

Modifier septembre 2016: Même s'il est agréable d'obtenir un occasionnels haut-voter pour cette, parce que le monde a évolué, j'aimerais maintenant aller avec la réponse qui utilise transformer (et qui a une tonne de upvotes). Je ne voudrais pas le faire cette manière.

Une autre façon de ne pas avoir à calculer une marge ou besoin d'un sous-conteneur:
```
#menu {
    position: fixed;   /* Take it out of the flow of the document */
    left: 0;           /* Left edge at left for now */
    right: 0;          /* Right edge at right for now, so full width */ 
    top: 30px;         /* Move it down from top of window */
    width: 500px;      /* Give it the desired width */ 
    margin: auto;      /* Center it */
    max-width: 100%;   /* Make it fit window if under 500px */ 
    z-index: 10000;    /* Whatever needed to force to front (1 might do) */
}
```
- Cela fonctionne, vous aurez envie d'ajouter bottom: 0; bien.
- Ce n'bas:0 faire? ie pourquoi est-il nécessaire? (C'est peu de temps depuis que j'ai regardé ça!)
- bottom:0 permettrait de s'assurer que le menu est toujours centrée verticalement, mais je vois maintenant ce n'est pas ce que l'OP a demandé. 🙂
- J'ai essayé de l'utiliser dans un contexte différent byt compris il n'a pas de centre dans FF si les éléments de la hauteur est supérieure à la fenêtre(viewport) hauteur
- Parce que le monde a évolué, j'aimerais maintenant aller avec la réponse qui utilise transformer. (J'ai fait ce commentaire avant, de faire référence au nom que le répondeur utilisé - mais ils ont changé que de nom donc, mon commentaire n'avait pas de sens et je l'ai supprimé - il suffit de chercher sur cette page pour transformer la place.)
InformationsquelleAutor Nick Rice

... ou vous pouvez vous envelopper menu div dans un autre:

    <div id="wrapper">
       <div id="menu">
       </div>
    </div>


#wrapper{
         width:800px;
         background: rgba(255, 255, 255, 0.8);
         margin:30px auto;
         border:1px solid red;
    }

    #menu{
        position:fixed;
        border:1px solid green;
        width:300px;
        height:30px;
    }

InformationsquelleAutor Meduza

5

Il est possible de horisontally centre de la div de cette façon:

html:
```
<div class="container">
    <div class="inner">content</div>
</div>
```
css:
```
.container {
    left: 0;
    right: 0;
    bottom: 0; /* or top: 0, or any needed value */
    position: fixed;
    z-index: 1000; /* or even higher to prevent guarantee overlapping */
}

.inner {
    max-width: 600px; /* just for example */
    margin: 0 auto;
}
```
À l'aide de cette façon, vous aurez toujours votre bloc interne centré, en outre, il peut être facilement transformé à vrai sensibles (dans l'exemple, il sera juste de liquide sur les petits écrans), donc pas de limitation dans comme dans la question à l'exemple et à la réponse choisie.

InformationsquelleAutor Denis V
5

Voici un autre deux-div solution. Essayé de rester concis et de ne pas codé en dur. Tout d'abord, le prévisibles html:
```
<div id="outer">
  <div id="inner">
    content
  </div>
</div>
```
Le principe derrière le code css suivant est de la position de certains côté de "l'extérieur", puis utiliser le fait qu'il assume la taille de "l'intérieur" relativement maj ce dernier.
```
#outer {
  position: fixed;
  left: 50%;          //% of window
}
#inner {
  position: relative;
  left: -50%;         //% of outer (which auto-matches inner width)
}
```
Cette approche est similaire à Quentin, mais intérieure peut être de taille variable.

InformationsquelleAutor Anonymous

Vous devez vous connecter pour publier un commentaire.