web-dev-qa-db-fra.com

Position par centre, plutôt que par le haut, à gauche

Est-il possible d'indiquer au code de se positionner par le point central d'un élément plutôt que par le point en haut à gauche? Si mon parent element a

width: 500px;

et mon enfant élément a

/*some width, for this example let's say it's 200px*/
position: absolute;
left: 50%;

on pourrait supposer qu'en fonction du positionnement 50%, l'élément enfant sera au milieu du parent, laissant 150px d'espace libre de chaque côté. Cependant, ce n’est pas le cas, puisque c’est le point en haut à gauche de l’enfant qui passe à 50% de la largeur du parent; par conséquent, la largeur entière de 200px va à droite à partir de là, laissant 250px d’espace libre à gauche et uniquement. 50px à droite.

Donc, ma question est la suivante: comment atteindre le positionnement du centre ?

J'ai trouvé cette solution:

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

mais je n'aime pas ça parce qu'il faut le modifier manuellement pour la largeur de chaque élément - j'aimerais quelque chose qui fonctionne globalement.

(Par exemple, lorsque je travaille dans Adobe After Effects, je peux définir la position d'un objet, puis définir un point d'ancrage spécifique de cet objet qui sera placé à cette position. Si le canevas a une largeur de 1280px, vous positionnez un objet sur 640px et que vous choisissez le centre de l’objet comme point d’ancrage, l’intégralité de l’objet sera centrée dans le canevas 1280px wide.)

J'imagine quelque chose comme ça en CSS:

position: absolute;
left: 50%;
horizontal-anchor: center;

De même, horizontal-anchor: right positionnerait l'élément par son côté droit, de sorte que tout le contenu se trouverait à gauche du point de la largeur de 50% de son parent.

Et, la même chose s'appliquerait pour vertical-anchor, vous l'obtenez.

Alors, est-ce que quelque chose comme ceci est possible en utilisant only CSS (pas de script)?

Merci!

htmlcsspositionpositioningcss-position
36
kaboom1

Si l'élément doit être positionné de manière absolue (donc, margin: 0 auto; n'est d'aucune utilité pour le centrage) et que la création de scripts est hors de question, vous pouvez y parvenir avec des transformations CSS3.

.centered-block {
    width: 100px; 
    left: 50%; 
    -webkit-transform: translate(-50%, 0); 
    position: absolute;
}

Voir ceci violon pour quelques exemples. Les parties importantes: left: 50%; pousse le bloc à mi-chemin de son parent (son côté gauche est donc à 50%, comme vous l'avez mentionné). transform: translate(-50%, 0); tire le bloc de la moitié de sa largeur own le long de l'axe des x (c.-à-d. à gauche), ce qui le placera directement au centre du parent.

Notez qu’il est peu probable que cela soit compatible avec tous les navigateurs et qu’il faudra quand même recourir à une solution de secours pour les anciens navigateurs.

46
John

Je suis tombé sur cette question et j'aimerais ajouter un autre moyen de centrer le contenu au sein d'une div.

En utilisant le mode d'affichage 'Boîte flexible' du CSS3, comme dans la définition des propriétés CSS suivantes pour le div parent

display: flex;
position: relative;
align-items: center;
justify-content:center;

Et 'au moins' définissant les propriétés suivantes à la div enfant

position:relative;

Le navigateur centre automatiquement le contenu de la div parente, indépendamment de sa largeur ou de sa hauteur. Cela s'avère particulièrement utile lorsque vous développez quelque chose comme une grille d'images ou que vous souhaitez simplement supprimer le souci de calculer recalculez-le lorsque vous changez d'avis sur la configuration de ladite div.

Dans mon propre travail, j'ai tendance à créer une classe nommée

.center-center

Avec les propriétés que j'ai décrites pour le div parent, ajoutez-le simplement à l'élément dont j'ai besoin que son contenu soit centré.

J'ai créé un JSFiddle pour supporter cette explication, n'hésitez pas à cliquer sur les carrés rouges pour voir le positionnement en action.

https://jsfiddle.net/f1Lfqrfs/

Pour une prise en charge multiligne, vous pouvez ajouter (ou supprimer le commentaire dans le fichier JSF) la propriété CSS suivante à la division parent

flex-wrap: wrap;
2
Kay Angevare

Si l'ajout d'un autre élément est une option, prenez en compte les éléments suivants:

( Voir le code suivant en direct ici )

HTML:

<div class="anchor" id="el1">
    <div class="object">
    </div>
</div>
<div class="anchor" id="el2">
    <div class="object">
    </div>
</div>

CSS:

/* CSS for all objects */

div.object
{
    width:               100%;
    height:              100%;
    position:            absolute;
    left:                -50%;
    top:                 -50%; /* to anchor at the top center point (as opposed to true center) set this to 0 or remove it all together */
}

div.anchor
{
    position:            absolute; /* (or relative, never static) */
}


/* CSS for specific objects */

div#el1
{
    /* any positioning and dimensioning properties for element 1 should go here */
    left:                100px;
    top:                 300px;
    width:               200px;
    height:              200px;
}

div#el2
{
    /* any positioning and dimensioning properties for element 2 should go here */
    left:                400px;
    top:                 500px;
    width:               100px;
    height:              100px;
}

div#el1 > div.object
{
    /* all other properties for element 1 should go here */
    background-color:    purple;
}

div#el2 > div.object
{
    /* all other properties for element 2 should go here */
    background-color:    orange;
}

Ce que nous faisons consiste essentiellement à configurer un objet pour définir la position, la largeur et la hauteur de l'élément, puis à en placer un autre à l'intérieur de celui-ci, qui est décalé de 50% et obtient ses dimensions parent (c.-à-d. width: 100%).

2
Sandy Gifford

Voici un moyen de centrer un élément de texte au milieu du conteneur (en utilisant un en-tête comme exemple

CSS:

.header {
     text-align: center;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     position: absolute;
}

Il se centre par un point d'ancrage central.

1
Melinda Chang

Je l'ai obtenu en utilisant transform: translateX avec calc pour le positionnement horizontal par le centre de l'élément au lieu de celui en haut à gauche. La même astuce peut être utilisée à la verticale en utilisant transform: transformY. Cela fonctionnera avec n'importe quel type de largeur (essayez de redimensionner)

Snippet: transform: translateX(calc(-50% + 223px));

Prise en charge du navigateur: https://caniuse.com/#feat=transforms2d } _, https://caniuse.com/#feat=calc

Codepen pour plus d'exemples: https://codepen.io/manikantag/pen/KJpxmN } _

Remarque sur offsetLeft/offsetTop etc.: el.offsetLeft ne donnera pas la valeur appropriée aux éléments transformés par CSS. Vous auriez besoin de quelque chose comme el.getBoundingClientRect().left - el.offsetLeft - el.parentNode.offsetLeft( comme mentionné ici )

Remarque sur l’effet de flux: comme indiqué dans Choses qui n'occupent pas d’espace }, la transformation n’affecte pas l’élément suivant sans tenir compte du décalage provoqué par la transformation. Parfois, cela peut ne pas être le comportement souhaité. Cela peut être corrigé en utilisant des marges négatives si largeur/hauteur sont fixes (ne fonctionne pas si largeur/hauteur utilise %)

.left-positioned {
  margin-left: 223px;
  background-color: lightcoral;
}

.center-positioned {
  transform: translateX(calc(-50% + 223px)); /*=====> actual solution */
  background-color: cyan;
}

.with-width {
  width: 343px;
  background-color: lightgreen;
}


/* styles not related to actual solution */

div {
  resize: both;
  overflow: auto;
}

.container {
  background-color: lightgray;
}

.ele {
  display: inline-block;
  height: 70px;
  text-align: center;
}
<div class="container">
  <div class="ele left-positioned">Reference element (left at 223px)</div> <br/>
  <div class="ele center-positioned">^<br/>Center positioned element (center at 223px)</div> <br/>
  <div class="ele center-positioned with-width">^<br/>Center positioned element with width (center at 223px)</div>
</div>

0
manikanta

left: 50% ne centre pas le centre de gravité de cette div. 50% à gauche, c'est la distance entre le bord gauche et le bord gauche de l'élément parent. Vous devez donc effectuer quelques calculs.

left = Width(parent div) - [ Width(child div) + Width(left border) + Width(right border) ]

left = left / 2

Donc, vous pouvez faire une fonction Javascript ...

function Position(var parentWidth, var childWith, var borderWidth)
{
      //Example parentWidth = 400, childWidth = 200, borderWidth = 1
      var left = (parentWidth - ( childWidth + borderWidth));
      left = left/2;
      document.getElementById("myDiv").style.left= left+"px";
}
0
Ali Bassam