Comment centrer absolument élément positionné dans div?
je dois placer un élément div (avec position:absolute; ) au centre de ma fenêtre. Mais j'ai des problèmes à le faire, parce que la largeur est inconnue .
j'ai essayé. Mais il faut l'ajuster en fonction de la largeur.
.center {
left: 50%;
bottom:5px;
}
des idées?
26 réponses
<body>
<div style="position: absolute; left: 50%;">
<div style="position: relative; left: -50%; border: dotted red 1px;">
I am some centered shrink-to-fit content! <br />
tum te tum
</div>
</div>
</body>ça marche pour moi:
#content {
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
width: 100px; /* Need a specific value to work */
}<body>
<div>
<div id="content">
I'm the content
</div>
</div>
</body>Solution Réactive
Voici une bonne solution pour la conception réactive ou les dimensions inconnues en général si vous n'avez pas besoin de soutenir IE8 et inférieur.
.centered-axis-x {
position: absolute;
left: 50%;
transform: translate(-50%, 0);
}
.outer {
position: relative; /* or absolute */
/* unnecessary styling properties */
margin: 5%;
width: 80%;
height: 500px;
border: 1px solid red;
}
.inner {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
/* unnecessary styling properties */
max-width: 50%;
text-align: center;
border: 1px solid blue;
}<div class="outer">
<div class="inner">I'm always centered<br/>doesn't matter how much text, height or width i have.<br/>The dimensions or my parent are irrelevant as well</div>
</div> l'indice est ,que left: 50% est relatif au parent tandis que le translate transform est relatif aux éléments largeur/hauteur.
de cette façon vous avez un élément parfaitement centré, avec une largeur flexible sur l'enfant et le parent. Bonus: cela fonctionne même si l'enfant est plus grand que le parent.
vous pouvez également le centrer verticalement avec ceci (et encore, la largeur et la hauteur du parent et de l'enfant peut être totalement flexible (et / ou inconnu)):
.centered-axis-xy {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
Gardez à l'esprit que vous pourriez avoir besoin transform vendeur préfixé aussi. Par exemple -webkit-transform: translate(-50%,-50%);
après Vraiment sympa.. Je voulais juste ajouter si quelqu'un veut le faire avec une étiquette div unique alors ici la sortie:
prenant width comme 900px .
#styleName {
position: absolute;
left: 50%;
width: 900px;
margin-left: -450px;
}
dans ce cas, il faut connaître le width à l'avance.
Centre Absolu
HTML:
<div class="parent">
<div class="child">
<!-- content -->
</div>
</div>
CSS:
.parent {
position: relative;
}
.child {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
Démo: http://jsbin.com/rexuk/2 /
testé dans Google Chrome, Firefox ,et IE8
Espérons que cela aide :)
ce travail pour vertical et horizontal
#myContent{
position: absolute;
left: 0;
right: 0;
top:0;
bottom:0;
margin: auto;
}
et si vous voulez make element center of parent, définissez la position de parent relative
#parentElement{
position:relative
}
edit:
-
pour alignement central vertical, réglez la hauteur à votre élément. merci à @Raul
-
si vous voulez make element center of parent, mettez la position de parent à relative
à la recherche d'une solution j'ai obtenu des réponses ci-dessus et j'ai pu faire en sorte que le contenu soit centré avec Matthias Weiler répond en utilisant text-align.
#content{
position:absolute;
left:0;
right:0;
text-align: center;
}
travaillé avec chrome et Firefox.
je comprends que cette question a déjà quelques réponses, mais je n'ai jamais trouvé une solution qui fonctionnerait dans presque toutes les classes qui a aussi du sens et est élégant, donc voici mon point de vue après avoir peaufiné un tas:
.container {
position: relative;
}
.container .cat-link {
position: absolute;
left: 50%;
top: 50%;
transform: translate3d(-50%,-50%,0);
z-index: 100;
text-transform: uppercase; /* Forces CSS to treat this as text, not a texture, so no more blurry bugs */
background-color: white;
}
.color-block {
height: 250px;
width: 100%;
background-color: green;
}<div class="container">
<a class="cat-link" href="">Category</a>
<div class="color-block"></div>
</div> ce que cela veut dire c'est me donner un top: 50% et un left: 50% , puis transformer (créer de l'espace)sur les deux axes X/Y à la valeur -50% , dans un sens"créer un espace miroir".
comme tel, cela crée un espace égal sur tous les 4 points d'un div, qui est toujours une boîte (a 4 côtés).
Ce sera:
- travailler sans connaître la hauteur / largeur du parent.
- le Travail sensible.
- travaux sur les axes X ou Y. Ou les deux, comme dans mon exemple.
- Je ne peux pas trouver une situation où il ne fonctionne pas.
autant que je sache, c'est impossible à atteindre pour une largeur inconnue.
vous pouvez - si cela fonctionne dans votre scénario - absolument positionner un élément invisible avec 100% largeur et hauteur, et avoir l'élément centré là en utilisant marge: auto et éventuellement vertical-align. Sinon, vous aurez besoin de Javascript pour le faire.
j'aimerais ajouter à la réponse de @bobince:
<body>
<div style="position: absolute; left: 50%;">
<div style="position: relative; left: -50%; border: dotted red 1px;">
I am some centered shrink-to-fit content! <br />
tum te tum
</div>
</div>
</body>
amélioré: / / / cela rend le scrollbar horizontal ne pas apparaître avec de grands éléments dans la div centrée.
<body>
<div style="width:100%; position: absolute; overflow:hidden;">
<div style="position:fixed; left: 50%;">
<div style="position: relative; left: -50%; border: dotted red 1px;">
I am some centered shrink-to-fit content! <br />
tum te tum
</div>
</div>
</div>
</body>
hérite d'un plugin jQuery utile pour ce faire. Trouvé ici . Je ne pense pas que c'est possible uniquement avec du CSS
/**
* @author: Suissa
* @name: Absolute Center
* @date: 2007-10-09
*/
jQuery.fn.center = function() {
return this.each(function(){
var el = $(this);
var h = el.height();
var w = el.width();
var w_box = $(window).width();
var h_box = $(window).height();
var w_total = (w_box - w)/2; //400
var h_total = (h_box - h)/2;
var css = {"position": 'absolute', "left": w_total+"px", "top":
h_total+"px"};
el.css(css)
});
};
version Sass / compass de la solution Responsive ci-dessus:
#content {
position: absolute;
left: 50%;
top: 50%;
@include vendor(transform, translate(-50%, -50%));
}
cela a fonctionné pour moi:
<div class="container><p>My text</p></div>
.container{
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
je sais que j'ai déjà fourni une réponse, et ma réponse précédente, avec d'autres données, fonctionne très bien. Mais j'ai utilisé dans le passé et il fonctionne mieux sur certains navigateurs et dans certaines situations. Alors je voulais donner cette réponse. Je n'ai pas "modifié" ma réponse précédente et je ne l'ai pas ajoutée parce que j'estime qu'il s'agit d'une réponse entièrement distincte et que les deux que j'ai fournies ne sont pas liées.
HTML:
<div id='parent'>
<div id='child'></div>
</div>
CSS:
#parent {
display: table;
}
#child {
display: table-cell;
vertical-align: middle;
}
#container
{
position: relative;
width: 100%;
float:left
}
#container .item
{
width: 50%;
position: absolute;
margin: auto;
left: 0;
right: 0;
}
fonctionne sur n'importe quelle largeur aléatoire inconnue de l'élément absolu positionné que vous voulez avoir au centre de votre élément de conteneur.
<div class="container">
<div class="box">
<img src="https://picsum.photos/200/300/?random" alt="">
</div>
</div>
.container {
position: relative;
width: 100%;
}
.box {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
HTML:
<div class="wrapper">
<div class="inner">
content
</div>
</div>
CSS:
.wrapper {
position: relative;
width: 200px;
height: 200px;
background: #ddd;
}
.inner {
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
margin: auto;
width: 100px;
height: 100px;
background: #ccc;
}
Ce, et d'autres exemples ici
HTML
<div id='parent'>
<div id='centered-child'></div>
</div>
CSS
#parent {
position: relative;
}
#centered-child {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto auto;
}
c'est un truc que j'ai trouvé pour faire flotter un DIV exactement au centre d'une page. Vraiment laid, Bien sûr ,mais fonctionne en tout
points et tirets
<div style="border: 5 dashed red;position:fixed;top:0;bottom:0;left:0;right:0;padding:5">
<table style="position:fixed;" width="100%" height="100%">
<tr>
<td style="width:50%"></td>
<td style="text-align:center">
<div style="width:200;border: 5 dashed green;padding:10">
Perfectly Centered Content
</div>
</td>
<td style="width:50%"></td>
</tr>
</table>
</div>
nettoyant
Wow que cinq ans ont passé, n'est-ce pas?
<div style="position:fixed;top:0px;bottom:0px;left:0px;right:0px;padding:5px">
<table style="position:fixed" width="100%" height="100%">
<tr>
<td style="width:50%"></td>
<td style="text-align:center">
<div style="padding:10px">
<img src="Happy.PM.png">
<h2>Stays in the Middle</h2>
</div>
</td>
<td style="width:50%"></td>
</tr>
</table>
Cette solution fonctionne si l'élément a width et height
.wrapper {
width: 300px;
height: 200px;
background-color: tomato;
position: relative;
}
.content {
width: 100px;
height: 100px;
background-color: deepskyblue;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}<div class="wrapper">
<div class="content"></div>
</div> vous pouvez placer l'image dans un div et Ajouter un div id et avoir le CSS pour ce div
avoir un text-align:center
HTML:
<div id="intro_img">
<img src="???" alt="???">
</div>
CSS:
#intro_img {
text-align:center;
}
#content { margin:0 auto; display:table; float:none;}<body>
<div>
<div id="content">
I'm the content
</div>
</div>
</body>Une approche simple qui a fonctionné pour moi à l'horizontale centre d'un bloc de inconnu largeur:
<div id="wrapper">
<div id="block"></div>
</div>
#wrapper { position: absolute; width: 100%; text-align: center; }
#block { display: inline-block; }
une propriété text-align peut être ajoutée au jeu de règles #block pour aligner son contenu indépendamment de l'alignement du bloc.
cela a fonctionné sur les versions récentes de Firefox, Chrome, IE, Edge et Safari.
j'ai utilisé une solution similaire:
#styleName {
position: absolute;
margin-left: -"X"px;
}
où " X " est la moitié de la largeur d'un div que je veux afficher. Fonctionne très bien pour moi dans tous les navigateurs.
essayez de ne pas utiliser le côté sombre de la CSS. Évitez d'utiliser des valeurs négatives pour les marges. Je sais que parfois vous êtes forcé de faire des choses horribles comme un margin-left: -450px , mais vous pourriez probablement faire quelque chose comme right: 450px . C'est juste ma manière de travailler.