Le meilleur moyen de centrer un <div> sur une page verticalement et horizontalement?
Meilleure façon de centrer un élément <div> sur une page 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?
Le meilleur moyen et le plus flexible
L'astuce principale de cette démo est que, dans le flux normal d'éléments allant de haut en bas, le margin-top: auto est donc mis à 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 également être centré verticalement sur les variables top et bottom (ne fonctionne pas dans IE7).
Cette astuce fonctionnera avec toutes les tailles de div.
div {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}<div></div>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 consiste à utiliser display: flex ou pseudo-classes .
Vous pouvez voir un exemple dans ce qui suit violon . Voici le 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 display: flex , selon css-tricks 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 susmentionnés, avec d'autres exemples.
Si vous devez prendre en charge des navigateurs plus anciens, qui ne prennent pas en charge css3, vous devrez probablement utiliser javascript ou la solution largeur/hauteur fixe indiquée dans les autres réponses.
La simplicité de cette technique est étonnante:
(Cette méthode a cependant des implications, mais si vous avez seulement besoin de centrer un élément quel que soit le flux du reste du contenu, c'est très bien. Utilisez-le 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 {
color: white;
background: red;
padding: 15px;
position: absolute;
top: 50%;
left: 50%;
-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 le pouvoir de transformer. En outre, nous devrions déjà oublier IE8, n'est-ce pas?
Je voudrais utiliser 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%). Ensuite, translate le déplace de 50% de la hauteur de la 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 aucune modification de l’élément parent.
translate est supérieur à 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 supportée par 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 au même endroit pendant le défilement de la page. C'est peut-être ce que vous voulez, mais sinon, il existe une autre méthode.
Maintenant, si nous essayons le même CSS, mais avec position définie sur absolute, ce 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>Je pense qu'il y a deux façons d'aligner un centre div 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 le moyen simple et le meilleur. pour la démo, visitez le lien ci-dessous:
http://w3webpro.blogspot.in/2013/07/how-to-make-div-horizontally-and.html
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>
Départ http://css-tricks.com/snippets/css/a-guide-to-flexbox/
La première div occupe l’ensemble de l’écran et dispose d’un affichage: flex set pour chaque navigateur. La deuxième div (centrée) tire parti de l'affichage: flex div où margin: auto fonctionne de manière brillante.
Note Compatibilité IE11 +. (IE10 avec préfixe).
Si vous regardez les nouveaux navigateurs (IE10 +),
vous pouvez ensuite utiliser la propriété transform pour aligner une 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 besoin de spécifier la hauteur et la largeur de la div car elle prend soin d'elle-même.
En outre, si vous souhaitez positionner une div au centre d'une autre div, vous pouvez simplement spécifier la position de la div externe en tant que relative, puis ce CSS commence à fonctionner pour votre div.
Comment ça marche:
Lorsque vous spécifiez left et top à 50%, la division 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 données en%) sont calculées en fonction de la hauteur de la div externe (dans votre cas, fenêtre).
Mais transform utilise la hauteur/largeur de l’élément pour déterminer la translation, de sorte que votre div se déplacera à gauche (50% largeur) et à son sommet (50% de sa hauteur) car ils sont exprimés en négatifs, ce qui l’aligne au centre de la page.
Si vous devez prendre en charge des navigateurs plus anciens (et désolé incluant IE9 également), la cellule de tableau est la méthode la plus populaire.
Ma méthode préférée pour centrer une boîte 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;
La zone de contenu
- devrait avoir
display: inline-block; - devrait réajuster l'alignement du texte horizontal à par exemple.
text-align: left;outext-align: right;, sauf si vous souhaitez que le texte soit centré
L’élégance de cette technique réside dans le fait que vous pouvez ajouter votre contenu dans la zone 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 souplesse avec transform: translate(-50%, -50%); ou transform: translate3d(-50%,-50%, 0);, la technique que je propose supporte beaucoup mieux le navigateur. Même avec les préfixes de navigateurs tels que -webkit, -ms ou -moz, transform, le support de navigateur n'est pas le même.
Donc, si vous vous souciez des anciens navigateurs (par exemple, IE9 et inférieur), vous ne devriez pas utiliser transform pour le positionnement.
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
Explication:
Donnez-lui un positionnement absolu (le parent devrait avoir un positionnement relatif). Ensuite, le coin supérieur gauche est déplacé vers le centre. Comme vous ne connaissez pas encore la largeur/hauteur, vous utilisez la transformation css pour traduire la position par rapport au milieu. translate (-50%, -50%) réduit la position x et y du coin supérieur gauche de 50% en largeur et en hauteur.
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();
};
C'est le meilleur code pour centrer le div bot horizontalement et verticalement
div
{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}Je sais que je suis en retard à la fête, mais voici un moyen de centrer une div de dimension inconnue dans 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 ceci démo .
Utiliser 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 du 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, visitez W3Schools , MDN ou CSS-Tricks pour plus d'informations.
Il existe en fait une solution, utilisant css3, qui peut centrer verticalement un div de hauteur inconnue. L'astuce consiste à réduire la division de 50%, puis à utiliser transformY pour la ramener au centre. La seule condition préalable est que l'élément à centrer ait un 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%);
}
Supporté par tous les principaux navigateurs, et IE 9 et plus (ne vous occupez pas de IE 8, car il est mort avec win xp cet automne. Dieu merci.)
div {
border-style: solid;
position: fixed;
width: 80%;
height: 80%;
left: 10%;
top: 10%;
}
Ajustez la gauche et le haut en fonction de la largeur et de la hauteur, c'est-à-dire (100% - 80%)/2 = 10%
2018 utilisant CSS Grid:
.parent{
display: grid;
place-items: center center;
}
Vérifiez la prise en charge du navigateur, Caniuse suggère que cela fonctionne à partir de Chrome 57, 52 FF, Opera 44, Safari 10.1, Edge 16. Je ne me suis pas vérifié .
Voir l'extrait ci-dessous:
.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>Une autre méthode (à l'épreuve des balles) tirée de la règle ici utilisant la règle 'display: table':
Markup
<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;
}
Solution
En n'utilisant que deux lignes de CSS, en utilisant le pouvoir magique de Flexbox
.parent { display: flex; }
.child { margin: auto }
Je regardais le fichier de vues de Laravel et remarquai que le texte était parfaitement centré au centre. Je me suis souvenu de cette question immédiatement. Voici comment 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>
Le résultat a l'air si:
Bien que je sois trop tard, mais c'est très facile et simple. Le centre de page reste toujours à 50% et au-dessus de 50%. Donc, moins la largeur et la hauteur div 50% et définir la marge gauche et la marge droite. J'espère que ça marche 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>Une réponse alternative serait this .
<div id="container">
<div id="centered"> </div>
</div>
et le 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;
}
Je suis surpris que cela n'ait pas encore été mentionné, mais le moyen le plus simple de procéder consiste à définir la hauteur, la marge (et la largeur, si vous le souhaitez) à l'aide de la taille de la fenêtre d'affichage.
Comme vous le savez peut-être, la hauteur totale de la fenêtre = 100vh.
Disons que vous voulez que la height de votre conteneur occupe 60% (60vh) de l'écran, vous pouvez diviser le reste (40vh) de manière égale entre la marge supérieure et inférieure afin que l'élément s'aligne tout seul. au centre automatiquement.
Régler le margin-left et margin-right sur auto garantira que le conteneur est centré horizontalement.
.container {
width: 60vw; /*optional*/
height: 60vh;
margin: 20vh auto;
background: #333;
}<div class="container">
</div>Si vous connaissez une taille définie pour votre div, vous pouvez utiliser calc.
Exemple en direct: https://jsfiddle.net/o8416eq3/
Notes: Ceci ne fonctionne que si vous avez codé en 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>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/
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 document div en corps
Un élément avec position: absolu; est positionné par rapport à l'ancêtre le plus proche (au lieu de positionné par rapport à la fenêtre d'affichage (balise body), comme fixe).
Pourtant; Si un élément absolu positionné n'a pas d'ancêtres positionnés, il utilise le corps du document et se déplace avec le défilement de page.
source: position CSS
Cette solution a fonctionné pour moi
.middleDiv{
position : absolute;
height : 90%;
bottom: 5%;
}
(ou hauteur: 70%/bas: 15%
hauteur: 40%/bas: 30% ...)
Si le navigateur le prend en charge, l’utilisation de translate est puissante.
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);
Veuillez utiliser les propriétés CSS suivantes pour centrer l'élément horizontalement et verticalement. Ceci a bien fonctionné pour moi.
div {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0px;
margin: auto;
width: 100px;
height: 100px;
}
Désolé pour la réponse tardive meilleure façon est
div {
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
}
margin-top et margin-left devraient correspondre à la taille de votre div