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

Le meilleur moyen et le plus souple

Mon démo sur dabblet.com

L'astuce principale de cette démo est que dans le flux normal des éléments allant du haut vers le bas, donc l'élément margin-top: auto est fixé à zéro. Cependant, un élément positionné de manière absolue agit de la même manière pour la distribution de l'espace libre, et peut de la même manière être centré verticalement à l'emplacement spécifié. top et bottom (ne fonctionne pas dans IE7).

Cette astuce fonctionne avec toutes les tailles de div .

HTML :

<div></div>

CSS :

div {
    width: 100px;
    height: 100px;
    background-color: red;

    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;

    margin: auto;
}

Answer 2

Même si cela n'a pas fonctionné lorsque le PO a posé cette question, je pense que, pour les navigateurs modernes du moins, la meilleure solution est d'utiliser boîte ou classes fictives .

Vous pouvez voir un exemple dans le tableau suivant violon .

Pour classes fictives un exemple pourrait être :

.centerPseudo {
    display:inline-block;
    text-align:center;
}

.centerPseudo::before{
    content:'';
    display:inline-block;
    height:100%;
    vertical-align:middle;
    width:0px;
}

L'utilisation de boîte selon w3schools est le suivant :

.centerFlex {
    /* 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;
}

Si vous devez prendre en charge des navigateurs plus anciens, qui ne supportent pas css3, vous devriez probablement utiliser javascript ou la solution de largeur/hauteur fixe présentée dans les autres réponses.

Answer 3

Je pense qu'il y a deux façons de faire aligner un centre de plongée par CSS.

.middleDiv
{

    position : absolute;    
    width:200px;
    height:200px;
    left:50%;
    top:50%;
    margin-left:-100px;
    margin-top:-100px;

}

C'est le moyen le plus simple et le plus efficace. Pour la démonstration, veuillez visiter le lien ci-dessous :

http://w3webpro.blogspot.in/2013/07/how-to-make-div-horizontally-and.html

Answer 4

Voici un script que j'ai écrit il y a quelque temps ( il est écrit en utilisant la bibliothèque jQuery ) :

var centerIt = function (el /* (jQuery element) Element to center */) {
    if (!el) {
        return;
    }
    var moveIt = function () {
        var winWidth = $(window).width();
        var winHeight = $(window).height();
        el.css("position","absolute").css("left", ((winWidth / 2) - (el.width() / 2)) + "px").css("top", ((winHeight / 2) - (el.height() / 2)) + "px");
    }; 
    $(window).resize(moveIt);
    moveIt();
};

Answer 5

Je sais que je suis en retard mais voici un moyen de centrer un div de dimension inconnue à l'intérieur d'un parent de dimension inconnue.

le style :

<style>

    .table {
      display: table;
      height: 100%;
      margin: 0 auto;
    }
    .table-cell {
      display: table-cell;
      vertical-align: middle;      
    }
    .centered {
      background-color: red;
    }
  </style>

HTML :

<div class="table">
    <div class="table-cell"><div class="centered">centered</div></div>
</div>

DEMO :

Regarde ça Démonstration .