Question Meilleur moyen de centrer un
sur une page verticalement et horizontalement?


La meilleure façon de centrer un <div> élément sur une page à la fois verticalement et horizontalement?

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


441
2017-12-10 17:11


origine


Réponses:


Le meilleur et le plus flexible

ma démo sur dabblet.com

Le principal truc dans cette démo est que dans le flux normal des éléments allant de haut en bas, de sorte que le margin-top: auto est mis à zéro. Cependant, un élément absolument positionné agit de la même manière pour la distribution de l’espace libre, et peut également être centré verticalement à la valeur spécifiée. top et bottom (ne fonctionne pas dans IE7).

Cette astuce fonctionnera 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;
}

622
2017-11-13 06:27



Même si cela n’a pas fonctionné lorsque l’OP a posé cette question, je pense que, pour les navigateurs modernes au moins, la meilleure solution consiste à utiliser affichage: flex ou pseudo classes.

Vous pouvez voir un exemple dans ce qui suit violon. Voici la violon mis à jour.

Pour pseudo classes 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 affichage: flex, selon css-astuces et MDN est comme suit:

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

Il existe d'autres attributs disponibles pour flex, qui sont expliqués dans les liens mentionnés ci-dessus, avec d'autres exemples.

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


104
2017-09-04 15:43



La simplicité de cette technique est magnifique:
(Cette méthode a cependant des implications, mais si vous ne devez que centrer l'élément indépendamment du flux du reste du contenu, c'est très bien. Utilisez-le avec précaution)

Markup:

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum accumsan tellus purus, et mollis nulla consectetur ac. Quisque id elit at diam convallis venenatis eget sed justo. Nunc egestas enim mauris, sit amet tempor risus ultricies in. Sed dignissim magna erat, vel laoreet tortor bibendum vitae. Ut porttitor tincidunt est imperdiet vestibulum. Vivamus id nibh tellus. Integer massa orci, gravida non imperdiet sed, consectetur ac quam. Nunc dignissim felis id tortor tincidunt, a eleifend nulla molestie. Phasellus eleifend leo purus, vel facilisis massa dignissim vitae. Pellentesque libero sapien, tincidunt ut lorem non, porta accumsan risus. Morbi tempus pharetra ex, vel luctus turpis tempus eu. Integer vitae sagittis massa, id gravida erat. Maecenas sed purus et magna tincidunt faucibus nec eget erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nec mollis sem.</div>

Et CSS:

div {
  background:red;
  position:absolute;
  color:#fff;
  top:50%;
  left:50%;
  padding:15px;
  -ms-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}   

Cela va centrer l'élément horizontalement et verticalement aussi. Pas de marges négatives, juste un pouvoir de transformation. Aussi, nous devrions déjà oublier IE8 ne devrions-nous pas?


77
2018-01-16 16:03



j'utiliserais translate:

Positionnez d'abord le coin supérieur gauche de la div au centre de la page (en utilisant position: fixed; top: 50%; left: 50%). Alors, translate le déplace de 50% de la hauteur du div pour le centrer verticalement sur la page. Enfin, translate déplace également le div vers la droite de 50% de sa largeur pour le centrer horizontalement.

Je pense en fait que cette méthode est meilleure que beaucoup d'autres, car elle ne nécessite aucun changement sur l'élément parent.

translate est mieux que translate3d dans certains scénarios, car il est supporté par un plus grand nombre de navigateurs. http://caniuse.com/#search=translate

Pour résumer, cette méthode est prise en charge sur toutes les versions de Chrome, Firefox 3.5+, Opera 11.5+, toutes les versions de Safari, IE 9+ et Edge.

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  
  font-size: 20px;
  background-color: cyan;
  border: darkgreen 5px solid;
  padding: 5px;
  z-index: 100;
}

table {
    position: absolute;
    top: 0;
    left: 0;
}

td {
    position: relative;
    top: 0;
    left: 0;
}
<table>
<tr>
    <td>
        <div class="centered">This div<br />is centered</div>
        <p>
            Lorem ipsum dolor sit amet, nam sint laoreet at, his ne sumo causae, simul decore deterruisset ne mel. Exerci atomorum est ut. At choro vituperatoribus usu. Dico epicurei persequeris quo ex, ea ius zril phaedrum eloquentiam, duo in aperiam admodum fuisset. No quidam consequuntur usu, in amet hinc simul eos. Ex soleat meliore percipitur mea, nihil omittam salutandi ut eos. Mea et impedit facilisi pertinax, ea viris graeci fierent pri, te sonet intellegebat his. Vis denique albucius instructior ad, ex eum iudicabit elaboraret. Sit ea intellegam liberavisse. Nusquam quaestio maiestatis ut qui, eam decore altera te. Unum cibo aliquip ut qui, te mea doming prompta. Ex rebum interesset nam, te nam zril suscipit, qui suavitate explicari appellantur te. Usu brute corpora mandamus eu. Dicit soluta his eu. In sint consequat sed, quo ea tota petentium. Adhuc prompta splendide mel ad, soluta delenit nec cu.
        </p>
    </td>
    <td>
        <p>
            Lorem ipsum dolor sit amet, dico choro recteque te cum, ex omnesque consectetuer sed, alii esse utinam et has. An qualisque democritum usu. Ea has habeo labores, laoreet intellegat te mea. Eius equidem inermis vel ne. Ne eum sonet labitur, nec id natum munere. Primis graecis est cu, quis dictas eu mea, eu quem offendit forensibus nec. Id animal mandamus his, vis in sonet tempor luptatum. Ne civibus oporteat comprehensam vix, per facete discere atomorum eu. Mucius probatus volutpat sit an, sumo nominavi democritum eam ut. Ea sit choro graece debitis, per ex verear voluptua epicurei. Id eum wisi dicat, ea sit velit doming cotidieque, eu sea amet delenit. Populo tacimates dissentiunt has cu. Has wisi hendrerit at, et quo doming putent docendi. Ea nibh vide omnium usu.
        </p>
    </td>
</tr>
</table>

Notez, cependant, que cette méthode fait que cette div reste à un endroit pendant le défilement de la page. Cela peut être ce que vous voulez mais sinon, il y a une autre méthode.


Maintenant, si nous essayons le même CSS, mais avec une position absolue, il sera au centre du dernier parent ayant une position absolue.

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);

  font-size: 20px;
  background-color: cyan;
  border: darkgreen 5px solid;
  padding: 5px;
  z-index: 100;
}

table {
    position: absolute;
    top: 0;
    left: 0;
}

td {
    position: relative;
    top: 0;
    left: 0;
}
<table>
<tr>
    <td>
        <div class="centered">This div<br />is centered</div>
        <p>
            Lorem ipsum dolor sit amet, nam sint laoreet at, his ne sumo causae, simul decore deterruisset ne mel. Exerci atomorum est ut. At choro vituperatoribus usu. Dico epicurei persequeris quo ex, ea ius zril phaedrum eloquentiam, duo in aperiam admodum fuisset. No quidam consequuntur usu, in amet hinc simul eos. Ex soleat meliore percipitur mea, nihil omittam salutandi ut eos. Mea et impedit facilisi pertinax, ea viris graeci fierent pri, te sonet intellegebat his. Vis denique albucius instructior ad, ex eum iudicabit elaboraret. Sit ea intellegam liberavisse. Nusquam quaestio maiestatis ut qui, eam decore altera te. Unum cibo aliquip ut qui, te mea doming prompta. Ex rebum interesset nam, te nam zril suscipit, qui suavitate explicari appellantur te. Usu brute corpora mandamus eu. Dicit soluta his eu. In sint consequat sed, quo ea tota petentium. Adhuc prompta splendide mel ad, soluta delenit nec cu.
        </p>
    </td>
    <td>
        <p>
            Lorem ipsum dolor sit amet, dico choro recteque te cum, ex omnesque consectetuer sed, alii esse utinam et has. An qualisque democritum usu. Ea has habeo labores, laoreet intellegat te mea. Eius equidem inermis vel ne. Ne eum sonet labitur, nec id natum munere. Primis graecis est cu, quis dictas eu mea, eu quem offendit forensibus nec. Id animal mandamus his, vis in sonet tempor luptatum. Ne civibus oporteat comprehensam vix, per facete discere atomorum eu. Mucius probatus volutpat sit an, sumo nominavi democritum eam ut. Ea sit choro graece debitis, per ex verear voluptua epicurei. Id eum wisi dicat, ea sit velit doming cotidieque, eu sea amet delenit. Populo tacimates dissentiunt has cu. Has wisi hendrerit at, et quo doming putent docendi. Ea nibh vide omnium usu.
        </p>
    </td>
</tr>
</table>


57
2018-04-19 11:42



Je pense qu'il y a deux façons de faire en sorte que le centre div soit aligné sur CSS.

.middleDiv {
    position : absolute;    
    width    : 200px;
    height   : 200px;
    left     : 50%;
    top      : 50%;
    margin-left : -100px; /* half of the width  */
    margin-top  : -100px; /* half of the height */
}

C'est le moyen simple et le meilleur. pour la démo s'il vous plaît visitez le lien ci-dessous:

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


22
2017-07-06 11:37



Si vous regardez les nouveaux navigateurs (IE10 +),

alors vous pouvez utiliser la propriété transform pour aligner un div au centre.

<div class="center-block">this is any div</div>

Et css pour cela devrait être:

.center-block {
  top:50%;
  left: 50%;
  transform: translate3d(-50%,-50%, 0);
  position: absolute;
}

Le problème ici est que vous n'avez même pas à spécifier la hauteur et la largeur du div car il prend soin de lui-même.

De plus, si vous voulez positionner une div au centre d’une autre div, vous pouvez simplement spécifier la position de la div externe relatif et puis ce CSS commence à travailler pour votre div.

Comment ça marche:

Lorsque vous spécifiez left et top à 50%, le div se situe dans le quart inférieur droit de la page, son extrémité supérieure gauche étant épinglée au centre de la page. En effet, les propriétés left / top (lorsqu'elles sont exprimées en%) sont calculées en fonction de la hauteur du div externe (dans votre cas, la fenêtre).

Mais la transformation utilise la hauteur / largeur de l'élément pour déterminer la translation. Vous diviserez donc à gauche (50% de largeur) et supérieure (50% de hauteur), car elles sont exprimées en négatif, l'alignant au centre de la page.

Si vous devez prendre en charge d'anciens navigateurs (et désolé également avec IE9), la cellule de tableau est la méthode la plus utilisée.


15
2017-07-26 17:38



Une solution simple tirant parti de Flex Display

 <div style = 'display:flex; position:absolute; top:0; bottom:0; right:0; left:0; '>
      <div id = 'div_you_want_centered' style = 'margin:auto;'> 
           This will be Centered 
      </div>
 </div>

Check-out http://css-tricks.com/snippets/css/a-guide-to-flexbox/

La première div occupe tout l'écran et possède un affichage: un ensemble flexible pour chaque navigateur. Le second div (centré div) profite de l'affichage: flex div où margin: auto fonctionne avec brio.

Remarque IE11 + compatibilité. (IE10 w / préfixe).


15
2018-01-09 20:58



Voici un script que j'ai écrit il y a longtemps (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();
};

14
2017-12-10 17:16