Centre div fixe avec largeur dynamique (CSS)

89

J'ai un div qui aura ce CSS:

#some_kind_of_popup
{
    position: fixed;
    top: 100px;
    min-height: 300px;
    width: 90%;
    max-width: 900px;
}

Maintenant, comment puis-je centrer ce div? Je peux utiliser margin-left: -450px; left: 50%;mais cela ne fonctionnera que lorsque l'écran est> 900 pixels. Après cela (lorsque la fenêtre est <900 pixels), elle ne sera plus centrée.

Je peux bien sûr faire cela avec une sorte de js, mais y a-t-il un "plus correct" de faire cela avec CSS?

css html center gubbfett
la source
4
@Liam - Je ne suis pas d'accord, je pense que cette question est pure et simple. Ces questions ne répondent pas à celle-ci en ce qui concerne le fait d'avoir un div sans largeur fixe centré.
Joshua M
Ce que Joshua a dit, c'est pour centrer un div dans un autre.
gubbfett
7
@Liam - De plus, vous ne pouvez pas utiliser un margin: 0 autosur un position: fixeddiv. Avez-vous même lu la question?
Joshua M
^ non. j'ai essayé ça aussi. : p
gubbfett
3
@JoshuaM Votre affirmation n'est pas correcte à 100%. Voyez ma réponse.
laconbass

Réponses:

222

Vous pouvez centrer un paramètre d'élément positionné fixedou et vers , puis & pour comme si vous centriez un élément positionné.absoluterightleft0margin-leftmargin-rightautostatic

#example {
    position: fixed;
    /* center the element */
    right: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;
    /* give it dimensions */
    min-height: 10em;
    width: 90%;
}

Voir cet exemple travaillant sur ce violon .

laconbass
la source
1
Juste pour mentionner ... Ce n'est pas si inattendu, mais cela échoue dans IE7. Il est positionné à 0px à partir de la gauche ici. Cela fonctionne parfaitement dans IE 8.
gubbfett
Cela ne fonctionne pas lorsque la largeur de l'élément est supérieure à la largeur de l'écran. Ce serait bien de le faire fonctionner dans cette situation.
andrewb
1
@andrewb vous pouvez appliquer une marge également négative à la fois sur rightet leftd'au moins a value >= witdth / 2, comme on le voit sur jsfiddle.net/PvfFy/168 , mais ce n'est pas une approche élégante à mon humble avis . Je l'ai testé sur chrome pour le plaisir, je ne sais pas si cela fonctionnera sur le reste
laconbass
5
En dehors de la portée de la question, cela dépend de la définition de la largeur de l'élément, ce n'est donc pas génial si vous avez un contenu dynamique dont la largeur est variable ou inconnue. En laissant de côté le centrage, je le ferais normalement avec l'affichage: bloc en ligne et sans largeur définie. Quelqu'un a-t-il une solution no-js pour ce cas?
énigment
4
La question dit la largeur dynamique , c'est tout le problème, vous ne pouvez pas simplement l'ignorer.
Gil Epshtain
54

Voici une autre méthode si vous pouvez utiliser en toute sécurité la transformpropriété de CSS3 :

.fixed-horizontal-center
{
    position: fixed;
    top: 100px; /* or whatever top you need */
    left: 50%;
    width: auto;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}

... ou si vous souhaitez un centrage horizontal ET vertical:

.fixed-center
{
    position: fixed;
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}
Alan Bellows
la source
5
Tant que c'est pour un navigateur moderne, c'est la MEILLEURE solution sur cette réponse! Le seul qui ressemble à un véritable `` float: center '', en ce sens que vous pouvez cliquer autour de l'élément enveloppant et ne pas être obligé de pêcher autour de lui. J'adore cette réponse!
SpYk3HH
1
Attention, n'utilisez pas la traduction en pourcentage pour centrer le texte car elle sera lissée si la valeur résultante est un flottant. Ho garçon, tu ne veux pas ça, non tu ne veux pas.
gnou
L'utilisation de transformations CSS peut entraîner un lissage sur plus que du texte; Je reçois des frontières géniales à la suite de la transformation.
Nathan K
1
Possibilité de contracter tôt lors du changement de taille d'écran (en fonction de la taille de la division), ce qui entraîne de grands pensionnaires autour du bord de la division.
Entité unique
7 
<div id="container">
    <div id="some_kind_of_popup">
        center me
    </div>
</div>

Vous auriez besoin de l'envelopper dans un récipient. voici le css

#container{
    position: fixed;
    top: 100px;
    width: 100%;
    text-align: center;
}
#some_kind_of_popup{
    display:inline-block;
    width: 90%;
    max-width: 900px;  
    min-height: 300px;  
}
Mathew Berg
la source
Ah, j'aime ta réflexion. Le div fixe ne sera qu'un conteneur pour un autre div avec le résultat réel? Je vais essayer celui-ci!
gubbfett
Bien que j'apprécie l'intuitivité de votre réponse, je ne vois pas comment cela permettrait de supporter ie6 / 7.
Mathew Berg
1
@MathewBerg, bon point sur ie6 / 7. Dans ce cas, votre réponse devrait fonctionner le mieux. C'est un peu OT, mais personnellement je pense que les développeurs ne devraient pas passer du temps à réparer des trucs pour <= ie7. Je pense qu'en fait, les développeurs devraient bloquer ces navigateurs pour forcer les personnes et les entreprises disposant d'anciens systèmes à se mettre à niveau. Il est difficile de vendre cette idée à un client payant! ;)
gubbfett
Oui, mais malheureusement, certaines entreprises ont besoin de la prise en charge des anciens navigateurs, quel que soit notre avenir. Allez-y et acceptez la mienne ou la réponse de laconbass en fonction de vos besoins.
Mathew Berg
1
cela ne fonctionne pas non plus car vous ne pouvez toujours pas cliquer sur "conteneur"
SpYk3HH