La meilleure façon de centrer un sur une page verticalement et horizontalement?

meilleure façon de centrer un élément <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?

450
demandé sur John Slegers 2008-12-10 20:11:33
la source

30 ответов

la meilleure et La plus souple

Mon démo sur dabblet.com

l'astuce principale dans cette démo est que dans le flux normal d'éléments allant de haut en bas, donc le margin-top: auto est mis à zéro. Cependant, un élément absolument positionné agit de la même façon pour la distribution de l'espace libre, et de la même manière peut être centré verticalement aux top et bottom spécifiés (ne fait pas travailler 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;
}
635
répondu Vladimir Starkov 2015-01-10 06:19:26
la source

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 est d'utiliser affichage: flex ou pseudo classes .

vous pouvez voir un exemple dans le suivant fiddle . Voici le fiddle 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'usage de display: flex , selon css-tricks et MDN est comme suit:

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

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

si vous devez prendre en charge les navigateurs plus anciens, qui ne prennent pas en charge css3, alors vous devriez probablement utiliser javascript ou le correctif solution largeur / hauteur indiquée dans les autres réponses.

107
répondu tombul 2015-06-10 17:10:47
la source

la simplicité de cette technique est stupéfiante:

(Cette méthode a ses implications cependant, mais si vous avez seulement besoin de centrer l'élément indépendamment du flux du reste du contenu, c'est très bien. À utiliser avec précaution)

Balisage:

<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 centrera l'élément horizontalement et verticalement aussi. Pas de marges négatives, juste la puissance des métamorphoses. Nous devrions aussi on oublie déjà IE8, non?

77
répondu robjez 2015-01-19 13:19:43
la source

j'utiliserais translate :

positionnez D'abord le coin supérieur gauche du div au centre de la page (en utilisant position: fixed; top: 50%; left: 50% ). Ensuite, translate le déplace jusqu'à 50% de la div hauteur pour le centrer verticalement sur la page. Enfin, translate déplace également le div à 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 pas de changements sur le élément parent.

translate est meilleur que translate3d dans certains scénarios car il est pris en charge 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>

avis, cependant, que cette méthode fait que cette div reste à un endroit pendant que la page est scrolled. C'est peut être ce que vous voulez, mais si non, il y a une autre méthode.



maintenant, si nous essayons le même CSS, mais avec la position définie à absolu, il sera au centre du dernier parent qui a 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>
59
répondu MDTech.us_MAN 2018-03-25 06:36:07
la source

je pense qu'il y a deux façons de rendre un div center aligné par 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 la manière la plus simple et la meilleure. pour la démonstration s'il vous plaît visitez le lien ci-dessous:

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

22
répondu user2555501 2016-06-22 19:28:07
la source

Simple solution de prendre avantage 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 /

le premier div prend tout l'écran et dispose d'un affichage:flex défini pour chaque navigateur. Le second div (centered div) profite de l'affichage:flex div où marge:auto fonctionne brillamment.

Note IE11+ compatibilité. (IE10 W / prefix).

18
répondu Ulad Kasach 2018-05-23 21:48:29
la source

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 hic ici est que vous n'avez même pas à spécifier la hauteur et la largeur de la div comme il prend soin par lui-même.

Aussi, si vous souhaitez placer une div au centre d'une autre div, alors vous pouvez il suffit de spécifier la position de la div externe comme relative et puis cette CSS commence à travailler pour votre div.

Comment cela fonctionne:

lorsque vous spécifiez gauche et haut à 50%, le div va au quart inférieur droit de la page avec son extrémité supérieure gauche épinglée au centre de la page. Ceci est dû au fait que les propriétés de gauche/haut(lorsqu'elles sont exprimées en %) sont calculées en fonction de la hauteur du div externe(dans votre cas, fenêtre.)

mais transform utilise hauteur / largeur de l'élément pour déterminer la traduction, de sorte que vous div se déplace à gauche(50% largeur) et le haut(50% sa hauteur) car ils sont donnés en négatifs, ce qui l'alignent au centre de la page.

si vous devez prendre en charge les navigateurs plus anciens(et désolé y compris IE9 ainsi) alors la cellule de table est la méthode la plus populaire à utiliser.

16
répondu Kop4lyf 2015-07-26 20:45:09
la source

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();
};
14
répondu Andreas Grech 2008-12-25 13:13:03
la source
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);

explication:

lui donne un positionnement absolu (le parent doit avoir un positionnement relatif). Ensuite, le coin supérieur gauche est déplacé au centre. Parce que vous ne connaissez pas encore la largeur/hauteur, vous utilisez CSS transform pour traduire la position relativement au milieu. translate (-50%, -50%) réduit la position x et y du coin supérieur gauche de 50% de la largeur et de la hauteur.

14
répondu AmazingTurtle 2016-11-11 21:55:21
la source

ma façon préférée de centrer une boîte à la fois verticalement et horizontalement, est la technique suivante:

le conteneur extérieur

  • devrait avoir display: table;

le conteneur intérieur

  • devrait avoir display: table-cell;
  • devrait avoir vertical-align: middle;
  • devrait avoir text-align: center;

Le contenu de la boîte

  • devrait avoir display: inline-block;
  • ré-ajuster le texte horizontal-alignement par exemple. text-align: left; ou text-align: right; , sauf si vous voulez que le texte soit centré

l'élégance de cette technique, c'est que vous pouvez ajouter votre contenu à la boîte de contenu sans vous soucier de sa hauteur ou de sa largeur!

Démo

body {
    margin : 0;
}

.outer-container {
    position : absolute;
    display: table;
    width: 100%; /* This could be ANY width */
    height: 100%; /* This could be ANY height */
    background: #ccc;
}

.inner-container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.centered-content {
    display: inline-block;
    text-align: left;
    background: #fff;
    padding : 20px;
    border : 1px solid #000;
}
<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
        You can put anything here!
     </div>
   </div>
</div>

Voir aussi ce violon !


MODIFIER

Oui, je sais que vous pouvez obtenir plus ou moins la même flexibilité avec transform: translate(-50%, -50%); ou transform: translate3d(-50%,-50%, 0); , la technique que je propose a un meilleur support de navigateur. Même avec les navigateurs préfixes comme -webkit , -ms ou -moz , transform n'offre pas tout à fait le même support de navigateur.

si vous vous souciez des navigateurs plus anciens (eg. IE9 et ci-dessous), vous ne devez pas utiliser transform pour le positionnement.

12
répondu John Slegers 2016-10-26 11:47:30
la source

C'est le meilleur code pour centrer le div bot horizontalement et verticalement

div
{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}
10
répondu Owais 2017-07-28 14:43:45
la source

je sais que je suis en retard à la fête, Mais voici une façon de centrer un div avec une dimension inconnue à l'intérieur d'un parent de dimension inconnue.

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:

découvrez ce démo .

8
répondu Suren Shrestha 2014-07-24 17:48:05
la source
div {
    border-style: solid;
    position: fixed;
    width: 80%;
    height: 80%;
    left: 10%;
    top: 10%;
}

régler à gauche et en haut en fonction de la largeur et de la hauteur, c'est-à-dire:(100% - 80%) / 2 = 10%

6
répondu winuxde 2014-07-22 15:45:32
la source

il y a effectivement une solution, en utilisant css3, qui peut centrer verticalement un div de hauteur inconnue. Le truc est de faire baisser le div de 50%, puis d'utiliser transformY pour le ramener au milieu. La seule condition préalable est que d'être centré sur l'élément parent. Exemple:

<div class="parent">
    <div class="center-me">
        Text, images, whatever suits you.
    </div>
</div>

.parent { 
    /* height can be whatever you want, also auto if you want a child 
       div to be responsible for the sizing */ 
    height: 200px;
}

.center-me { 
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    /* prefixes needed for cross-browser support */
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

pris en charge par tous les principaux navigateurs, et IE 9 et plus (ne vous souciez pas de IE 8, car il est mort avec win xp cet automne. Dieu merci.)

js Fiddle Demo

6
répondu giorgio 2014-09-22 20:06:54
la source

Cette solution a fonctionné pour moi

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

(ou Hauteur: 70% / fond: 15%

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

5
répondu Dany Y 2012-08-24 18:03:22
la source

une autre méthode (pare-balles) tirée de ici en utilisant 'display:table' règle:

Balisage

<div class="container">
  <div class="outer">
    <div class="inner">
      <div class="centered">
        ...
      </div>
    </div>
  </div>
</div>

CSS:

.outer {
  display: table;
  width: 100%;
  height: 100%;
}
.inner {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.centered {
  position: relative;
  display: inline-block;

  width: 50%;
  padding: 1em;
  background: orange;
  color: white;
}
5
répondu robjez 2014-10-09 19:44:29
la source

je regardais le fichier de vue de Laravel et j'ai remarqué qu'ils centraient parfaitement le texte au milieu. Je me suis immédiatement souvenu de cette question. C'est ainsi qu'ils l'ont fait:

<html>
<head>
    <title>Laravel</title>

    <!--<link href='//fonts.googleapis.com/css?family=Lato:100' rel='stylesheet' type='text/css'>-->

    <style>
        .container {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            display: table;

        }

        .inside {
            text-align: center;
            display: table-cell;
            vertical-align: middle;
        }


    </style>
</head>
<body>
    <div class="container">
            <div class="inside">This text is centered</div>
    </div>
</body>

Résultat est donc:

enter image description here

5
répondu Tebe 2015-03-24 23:19:50
la source

Solution

utilisant seulement deux lignes de CSS, en utilisant le pouvoir magique de Flexbox

.parent { display: flex; }
.child { margin: auto }
5
répondu 2017-08-15 02:28:35
la source

une réponse alternative serait this .

<div id="container"> 
    <div id="centered"> </div>
</div>

et la css:

#container {
    height: 400px;
    width: 400px;
    background-color: lightblue;
    text-align: center;
}

#container:before {
    height: 100%;
    content: '';
    display: inline-block;
    vertical-align: middle;
}

#centered {
    width: 100px;
    height: 100px;
    background-color: blue;
    display: inline-block;
    vertical-align: middle;
    margin: 0 auto;
}
4
répondu István 2014-12-11 17:16:49
la source

je suis surpris que cela n'ait pas encore été mentionné, mais la façon la plus simple de le faire serait de définir la hauteur, la marge (et la largeur, si vous voulez) en utilisant les tailles de viewport.

Comme vous le savez peut-être, hauteur totale du viewport = 100vh.

Si vous voulez que le height de votre conteneur occupe 60% (60vh) de l'écran, vous pouvez diviser le reste (40vh) également entre la marge supérieure et la marge inférieure de sorte que l'élément s'aligne au centre automatiquement.

Le réglage des valeurs margin-left et margin-right à auto permet de s'assurer que le conteneur est centré horizontalement.

.container {
         width: 60vw; /*optional*/
         height: 60vh;
         margin: 20vh auto;
         background: #333;
 }
<div class="container">
</div>
4
répondu Rocks 2018-02-26 07:00:13
la source

Si je suis en retard, mais c'est très facile et simple. Page center est toujours à gauche de 50%, et top 50%. Donc moins la largeur de div et la hauteur de 50% et réglez marge gauche et marge droite. Espérons qu'il œuvre pour partout -

body{
  background: #EEE;
}
.center-div{
  position: absolute;
  width: 200px;
  height: 60px;
  left: 50%;  
  margin-left: -100px;
  top: 50%;
  margin-top: -30px;
  background: #CCC;
  color: #000;
  text-align: center;
}
<div class="center-div">
  <h3>This is center div</h3>
</div>
4
répondu Mahfuzur Rahman 2018-04-26 07:58:51
la source

si vous connaissez une taille définie pour votre div vous pouvez utiliser calc .

Live example: https://jsfiddle.net/o8416eq3 /

Notes: cela ne fonctionne que si vous avez codé dur la largeur et la hauteur de votre `div` dans le CSS.

#target {
  position:fixed;
  top: calc(50vh - 100px/2);
  left: calc(50vw - 200px/2);
  width:200px;
  height:100px;
  background-color:red;
}
<div id='target'></div>
3
répondu GibboK 2016-06-16 14:59:42
la source

en utilisant display:grid sur parent et le réglage margin:auto au centrerd elemnt fera l'affaire:

voir ci-dessous snippet:

html,body {
  width :100%;
  height:100%;
  margin:0;
  padding:0;
}

.container {
  display:grid;
  height:90%;
  background-color:blue;
}

.content {
  margin:auto;
  color:white;
}
<div class="container">
  <div class="content"> cented div  here</div>
</div>
3
répondu Boo Berr'ita 2017-08-17 11:39:48
la source

div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%); /* IE 9 */
    -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */	    
}
<body>
    <div>Div to be aligned vertically</div>
</body>

position: absolue div in body document

élément avec position: absolu; est positionné par rapport à l'ancêtre positionné le plus proche (au lieu de relatif positionné par rapport au viewport (étiquette de corps), comme fixe).

cependant, si un élément positionné absolu n'a pas d'ancêtres positionnés, il utilise le corps du document, et se déplace avec la page de défilement.

source: position CSS

3
répondu antelove 2017-09-23 05:17:30
la source

2018 façon à l'aide de Grille CSS:

.parent{
    display: grid;
    place-items: center center;
}

Vérifier la prise en charge du navigateur, Caniuse l'indique, il fonctionne à partir de Chrome 57, 52 FF, Opera 44, Safari 10.1, Edge 16. Je n'ai pas vérifier moi-même.

Voir infra:

.parent{
    display: grid;
    place-items: center center;
    /*place-items is a shorthand for align-items and justify-items*/
    
    height: 200px;
    border: 1px solid black;
    background: gainsboro;
}

.child{
    background: white;
}
<div class="parent">
    <div class="child">Centered!</div>
</div>
3
répondu 1valdis 2018-02-03 23:13:41
la source

si vous utilisez JQuery, vous pouvez le faire en utilisant .position() ;

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

CSS

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

Javascript (JQuery)

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

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

3
répondu Master Programmer 2018-02-15 16:50:06
la source

est le navigateur le supporte, en utilisant translate est puissant.

position: absolute;
background-color: red;

width: 70%;     
height: 30%; 

/* The translate % is relative to the size of the div and not the container*/ 
/* 21.42% = ( (100%-70%/2) / 0.7 ) */
/* 116.666% = ( (100%-30%/2) / 0.3 ) */
transform: translate3d( 21.42%, 116.666%, 0);
2
répondu Sebastien Lorber 2015-08-04 16:42:14
la source

veuillez utiliser les propriétés CSS suivantes pour l'élément center align à l'horizontale et à la verticale. C'est a bien fonctionné pour moi.

div {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0px;
  margin: auto;
  width: 100px;
  height: 100px;
}
1
répondu Suraj Kavade 2017-10-06 11:44:32
la source

utilisant Flex-box à mon avis:

#parent {
  display: flex;
  justify-content: center;
  align-items: center;
}
<div id="parent">
  <div id="child">Hello World!</div>
</div>

vous voyez qu'il n'y a que trois propriétés CSS que vous devez utiliser pour centrer l'élément enfant verticalement et horizontalement. display: center; faites la partie principale en activant simplement l'affichage Flex-box, justify-content: center; centrez l'élément enfant verticalement et align-items: center; centrez-le horizontalement. Pour voir le meilleur résultat, je viens d'ajouter quelques styles supplémentaires:

#parent {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 500px;
  width: 500px;
  background: yellow;
}

#child {
  width: 100px;
  height: 100px;
  background: silver;
}
<div id="parent">
  <div id="child">Hello World!</div>
</div>

si vous voulez en savoir plus sur Flex-box, vous pouvez visiter W3Schools , MDN ou CSS-Tricks pour plus d'informations.

1
répondu Morteza Sadri 2018-09-11 02:25:42
la source

Désolé pour la réponse tardive la meilleure façon est

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

marge-haut et marge-gauche doit être en fonction de la taille de la boîte de div

0
répondu Ashish 2013-10-16 18:58:45
la source