web-dev-qa-db-fra.com

CSS: moyen réactif de centrer un div fluide (sans largeur px) tout en limitant la largeur maximale?

J'ai rencontré un million de questions sur la manière de centrer un élément de bloc et il semble y avoir plusieurs façons populaires de le faire, mais elles reposent toutes sur des largeurs de pixels fixes. Ensuite, soit margin:0 auto, soit avec positionnement absolu/relatif et left:50%; margin-left:[-1/2 width];, etc. Nous savons tous que cela ne peut pas fonctionner si la largeur de l'élément est définie en%.

N'y a-t-il vraiment aucun moyen de faire cela d'une manière vraiment fluide? Je parle d’utiliser % pour width (not _ définissant une douzaine de requêtes multimédia avec des largeurs fixes de plus en plus petites). 

Attention: de nombreuses solutions utilisent le mot à la mode "responsive" mais non répondent à ma question (car elles utilisent des largeurs fixes de toute façon). Voici un exemple .

Mise à jour: J'ai failli oublier: comment gérez-vous la limitation de la largeur maximale de l'élément centré tout en la maintenant au centre? Voir mon commentaire sous la réponse de @ smdrager. Exemple de la vie réelle. Je souhaite qu'un message contextuel ou un effet de boîte à lumière contenant un paragraphe de texte apparaisse centré dans la fenêtre et que le texte soit enveloppé de manière fluide en fonction de la largeur. Mais je ne veux pas que la zone de texte s’étire trop loin là où le texte deviendrait difficile à lire (imaginez un écran de 4 pieds avec trois paragraphes étirés sur une seule ligne de texte). Si vous ajoutez une largeur maximale à la plupart des approches, la case centrée s'arrête lorsque la largeur maximale est atteinte.

htmlcsshtml5css3responsive-design
24
emersonthis

Centrer horizontalement et verticalement

En réalité, avoir la hauteur et la largeur en pourcentage facilite encore le centrage. Vous venez de compenser la gauche et le haut de la moitié de la surface non occupée par la div.

Donc, si votre taille est de 40%, 100% - 40% = 60%. Donc, vous voulez 30% au-dessus et en dessous. Puis top: 30% font le tour.

Voir l'exemple ici: http://dabblet.com/Gist/5957545

Centré uniquement horizontalement

Utilisez inline-block. L'autre réponse ici ne fonctionnera pas pour IE 8 et les versions antérieures, cependant. Vous devez utiliser un hack CSS ou des styles conditionnels pour cela. Voici la version de hack:

Voir l'exemple ici: http://dabblet.com/Gist/5957591

.inlineblock { 
    display: inline-block;
    zoom: 1;
    display*: inline; /* ie hack */
}

MODIFIER

En utilisant des requêtes multimédia, vous pouvez combiner deux techniques pour obtenir l’effet souhaité. La seule complication est la hauteur. Vous utilisez un div imbriqué pour basculer entre% width et 

http://dabblet.com/Gist/5957676

@media (max-width: 1000px) {
    .center{}
    .center-inner{left:25%;top:25%;position:absolute;width:50%;height:300px;background:#f0f;text-align:center;max-width:500px;max-height:500px;}
}
@media (min-width: 1000px) {
    .center{left:50%;top:25%;position:absolute;}
    .center-inner{width:500px;height:100%;margin-left:-250px;height:300px;background:#f0f;text-align:center;max-width:500px;max-height:500px;}
}
39
smdrager

Extrait de l'article de Chris Coyier sur les éléments centrage en largeur :

Au lieu d'utiliser des marges négatives, vous utilisez translate().__ négatif. se transforme.

.center {
  position: absolute;
  left: 50%;
  top: 50%;

  /*
  Nope =(
  margin-left: -25%;
  margin-top: -25%;
  */

  /* 
  Yep!
  */
  transform: translate(-50%, -50%);

  /*
  Not even necessary really. 
  e.g. Height could be left out!
  */
  width: 40%;
  height: 50%;
}

Codepen

16
Brian Phillips

Je pense que vous pouvez utiliser display: inline-block sur l'élément que vous souhaitez centrer et définir text-align: center; sur son parent. Cela centre définitivement la div sur toutes les tailles d'écran.

Ici, vous pouvez voir un violon: http://jsfiddle.net/PwC4T/2/ _ J'ajoute le code ici pour que ce soit complet.

HTML

<div id="container">
    <div id="main">
        <div id="somebackground">
            Hi
        </div>
    </div>
</div>

CSS

#container
{
    text-align: center;
}
#main
{
    display: inline-block;
}
#somebackground
{
    text-align: left;
    background-color: red;
}

Pour le centrage vertical, j'ai "abandonné" la prise en charge de certains navigateurs plus anciens au profit de display: table;, qui réduit absolument le code, voir ce violon: http://jsfiddle.net/jFAjY/1/

Voici le code (encore) pour l'exhaustivité:

HTML

<body>
    <div id="table-container">
        <div id="container">
            <div id="main">
                <div id="somebackground">
                    Hi
                </div>
            </div>
        </div>
    </div>
</body>

CSS

body, html
{
    height: 100%;
}
#table-container
{
    display:    table;
    text-align: center;
    width:      100%;
    height:     100%;
}
#container
{
    display:        table-cell;
    vertical-align: middle;
}
#main
{
    display: inline-block;
}
#somebackground
{
    text-align:       left;
    background-color: red;
}

L'avantage de cette approche? Vous n'avez pas à traiter avec any percantage, il gère également correctement la balise <video> (html5), qui a deux tailles différentes (une au chargement, une après le chargement, vous ne pouvez pas récupérer la vidéo est chargée).

L'inconvénient est qu'il supprime la prise en charge de certains navigateurs plus anciens (je pense que IE8 ne gérera pas cela correctement)

12
Fire-Dragon-DoL

MODIFIER :
http://codepen.io/gcyrillus/pen/daCyu Donc, pour un popup, vous devez utiliser position: fixed, display: propriété de la table et max-width avec em ou rem: ) avec cette base CSS:

#popup {
  position:fixed;
  width:100%;
  height:100%;
  display:table;
  pointer-events:none;
}
#popup > div {
  display:table-cell;
  vertical-align:middle;
}
#popup p {
  width:80%;
  max-width:20em;
  margin:auto;
  pointer-events:auto;
}
1
G-Cyr

Cela peut sembler très simpliste ...

Mais cela centrera la division à l'intérieur de la division, exactement au centre par rapport aux marges gauche et droite ou au conteneur parent, mais vous pouvez ajuster le pourcentage de manière symétrique à gauche et à droite.

margin-right: 10%;
margin-left: 10%;

Ensuite, vous pouvez ajuster% pour le rendre aussi large que vous le souhaitez.

0
Bruno Vincent

Quelque chose comme ça pourrait être ça?

HTML

 <div class="random">
        SOMETHING
 </div>

CSS

body{

    text-align: center;
}

.random{

    width: 60%;
    margin: auto;
    background-color: yellow;
    display:block;

}

DEMO: http://jsfiddle.net/t5Pp2/2/

Edit: ajouter display:block ne gâche rien, alors ...

Vous pouvez également définir la marge sur: margin: 0 auto 0 auto; pour vous assurer qu'elle ne centre pas uniquement de cette façon, pas du haut également.

0
Ms. Nobody