vertical align center and horizontal

gistfile1.txt

@mixin vertical-align {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
@mixin vertical-align {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
@mixin horizontal-align {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
@mixin center-align {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  top: 50%;
  transform: translateY(-50%);
}

float:left
Dans certains cas il est parfois nécessaire d'utiliser les float:left afin de placer les éléments les uns à côté des autres (pour un menu par exemple). En plus de ça on souhaite centrer la somme des éléments. Pour cela il suffira alors d'entourer nos éléments d'un élément inline-block qui prendra automatiquement la largeur des éléments.


.box
    .box-content
        .box-item
        .box-item
        .box-item

 .box{ text-align:center; }
 .box-content{ display:inline-block; }
 .box-item{ float:left; }
 
 center vertical
 Le centrage vertical existe bel est bien. Si vous avez déjà travaillé avec les tableaux vous avez sûrement remarqué qu'il est possible d'obtenir un tel centrage en utilisant un vertical-align:middle. En revanche, cet attribut ne marche pas avec des éléments standarts. Heureusement il est possible d'utiliser l'attribut display pour que nos éléments se comportent comme un tableau.
 
 
 .box
    .box-content
        .box-item

 .box{ display:table; }
 .box-content{ display:table-cell; vertical-align:middle; }
 .box-item{  }
 
 
 position:absolute
Une autre solution est d'utiliser les position absolutes.

.box
    .box-item

.box{ position:relative; }
.box-item{ 
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;

    height: 50px;
    width: 50px; 
}



En revanche cette méthod implique de connaitre la largeur et la hauteur de notre élément. En effet si on n précise pas de largeur, ni de hauteur le navigateur va essayer de satisfaire toutes nos règle et notre élément va alors prendre toute la hauteur et toute la largeur.
On pourra alors utiliser un dérivé de la méthode précédente en utilisant les transformations CSS.

.box
    .box-item

.box{ position:relative; }
.box-item{ 
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%); 
}



display:flex
Enfin, un nouvelle propriété à fait son apparition récemment pour résoudre tous nos problème et nous rendre la vie plus simple : le display:flex (malheureusement non supporté par internet explorer 10 et inférieur). Le gros avantage de ce nouveau format c'est qu'il nous permet de piloter le comportement des blocs enfant directement depuis l'élément principal, permettant ainsi d'éviter la soupe d'élément HTML.

.box{
   display: flex;
   justify-content: center;
   align-items: center;
   flex-wrap: wrap;
   align-content: center;
}