Meilleure façon de centrer une <div> sur une page verticalement et horizontalement ?

Question

Meilleure façon de centrer un <div> sur une page à la fois verticalement et horizontalement ?

Je sais que margin-left: auto; margin-right: auto; sera centré sur l'horizontale, mais quelle est la meilleure façon de le faire verticalement aussi ?

Answer 1

Je sais que c'est un vieux sujet, mais que diriez-vous d'une solution qui ne nécessite pas de soustraire la moitié de la hauteur ou l'utilisation de javascript ? Oh, et cela fonctionne à l'intérieur d'autres parents absolus/relatifs.

.abs-centered {
  margin: auto;
  position: absolute;
  bottom: 0;
  left: 0;
  top: 0;
  right: 0;
}

Violon : http://jsfiddle.net/qQ22u/

Answer 2

div {
    border-style: solid;
    position: fixed;
    width: 80%;
    height: 80%;
    left: 10%;
    top: 10%;
}

Ajustez la gauche et le haut par rapport à la largeur et à la hauteur, c'est-à-dire (100% - 80%) / 2 = 10%.

Answer 3

Si vous utilisez jquery ui, vous pouvez le faire en utilisant .position() ;

<div class="positionthis"></div>

CSS

.positionthis {
    width:100px;
    height:100px;
    position: absolute;
    background:blue;
}

Jquery

$(document).ready(function () {
    $('.positionthis').position({
        of: $(document),
        my: 'center center',
        at: 'center center',
        collision: 'flip flip'
    });
});

J'espère que cela vous aidera.

jsfiddle : http://jsfiddle.net/vx9gV/

Answer 4

Désolé pour la réponse tardive Le meilleur moyen est

  div {
      position: fixed;
      top: 50%;
      left: 50%;
      margin-top: -50px;
      margin-left: -100px;
    }

margin-top et margin-left doivent être conformes à la taille de votre boîte div.

Answer 5

Cette solution a fonctionné pour moi

    .middleDiv{
        position : absolute;
        height : 90%;
        bottom: 5%;
    }

(ou hauteur : 70 % / bas : 15 %)

hauteur : 40% / bas :30% ...)