web-dev-qa-db-fra.com

Aligner verticalement à l'aide de CSS 3

Avec CSS 3, existe-t-il un moyen d'aligner verticalement un élément de bloc? Avez-vous un exemple? Merci.

csshtmlvertical-alignmentalignment
72
tho

Je regardais ce problème récemment et j'ai essayé:

HTML:

<body>
    <div id="my-div"></div>
</body>

CSS:

#my-div {               
    position: absolute;
    height: 100px;
    width: 100px;    
    left: 50%;
    top: 50%;
    background: red;
    transform: translate(-50%, -50%);    
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

Voici le violon:

http://jsfiddle.net/sTcp9/6/

Cela fonctionne même en utilisant "width/height: auto", à la place de cotes fixes. Testé sur les dernières versions sur Firefox, Chrome et IE (* gasp *).

83
Charlie

Remarque: Cet exemple utilise le version préliminaire du module de présentation de boîtes souples . Il a été remplacé par l’incompatible spécification moderne.

Centrez les éléments enfants d'une boîte div en utilisant ensemble les propriétés box-align et box-pack.

Exemple:

div
{
width:350px;
height:100px;
border:1px solid black;

/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;

/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;

/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;

/* W3C */
display:box;
box-pack:center;
box-align:center;
}
34
Crashalot

Utilisation de Flexbox:

.container {
    display: flex;
    /* Vertical align: */
    align-items: center;
    /* Horizontal align: */
    justify-content: center;
}

jsFiddle: http://jsfiddle.net/maars/8Uyvf

Prise en charge du navigateur: http://caniuse.com/flexbox

32
Andrii Nemchenko

deux manières:

1. Positionnement absolu - vous devez avoir une hauteur déclarée pour que cela fonctionne: 

<div>
   <div class='center'>Hey</div>
</div>

div {height: 100%; width: 100%; position: relative}
div.center {
     width: 100px;
     height: 100px;
     top: 50%;
     margin-top: -50px;
}

* 2. Utilisez display: table http://jsfiddle.net/B7CpL/2/ *

<div>
     <img src="/img.png" />
     <div class="text">text centered with image</div>
</div>


div {
     display: table;
     vertical-align: middle
}

div img,
div.text {
     display: table-cell;
     vertical-align: middle
}
  1. Un tutoriel plus détaillé utilisant display: table

http://css-tricks.com/vertically-center-multi-lined-text/

9
j-man86

Il existe un moyen simple d'aligner verticalement et horizontalement une div en css.

Il suffit de mettre une hauteur à votre div et d'appliquer ce style

.hv-center {
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}

J'espère que cela a aidé.

2
Edouard Kombo

J'utilise toujours le tutoriel de cet article pour centrer les choses. C'est bien

div.container3 {
   height: 10em;
   position: relative }              /* 1 */
div.container3 p {
   margin: 0;
   position: absolute;               /* 2 */
   top: 50%;                         /* 3 */
   transform: translate(0, -50%) }   /* 4 */

Les règles essentielles sont:

  1. Rendez le conteneur relativement positionné, ce qui le déclare comme un conteneur pour les éléments positionnés de manière absolue.
  2. Rendre l'élément lui-même absolument positionné.
  3. Placez-le à mi-hauteur du récipient avec "top: 50%". (Notez que 50% 'signifie ici 50% de la hauteur du conteneur.)
  4. Utilisez une translation pour déplacer l'élément de moitié par rapport à sa propre hauteur. (Le '50% 'dans' traduire (0, -50%) 'fait référence à la hauteur de l'élément lui-même.)
2
Mr Neo

Essayez ceci fonctionne aussi parfaitement:

html:

   <body>
    <div id="my-div"></div>
   </body>

css:

#my-div {               
    position: absolute;
    height: 100px;
    width: 100px;    
    left: 50%;
    top: 50%;
    background: red;
    display: table-cell;
    vertical-align: middle

}
0
Mr.G