Positionner div au centre avec left

Bonjour,

je voudrais sur une splash page positionner un titre en position absolue vers le bas de ma page et centré horizontalement.
Pour le positionner verticalement j'ai utilisé

bottom: 10%;

mais pour le centrer horizontalement, je voudrais utiliser

left : 50%;

or ça ne prend pas comme point de référence le centre de ma div, mais le bord gauche (et donc ce n'est pas centré. Y a-t-il un moyen de spécifier que les 50% partent du centre de la div et non du bord?

Alors oui je pourrais faire margin right et left auto en specifiant une width.
Mais j'ai un border et un background color ajustés à mon texte et si je lui met une width ils ne seront plus ajustés. Et sans width, le centrage par margin auto ne marche pas.

Je reviens donc à ma question: y a-t-il moyen de centrer avec left ?

Merci d'avance !
Modifié par Isaabelle (04 Feb 2020 - 16:24)

Bonjour,

un moyen de faire cela est d'utiliser translate :
https://css-tricks.com/centering-percentage-widthheight-elements/

bonjour,

pour que ton élément en absolu se positionne par rapport à son parent direct et non à a fenêtre (html) , il faut que celui-ci soit en positionnement : relative, absolute ou fixed. par défaut il est en position static.

En plaçant le parent en position:relative; , left:50%; correspondra a ce que tu souhaites, mais top:10%; sera lui aussi calculé a partir du parent et non plus de la page.

Peut tu faire nous faire un exemple minimale (même avec du faux texte et de fausse images ça va bien) sur un site comme http://jsfiddle.net ou http://codepen.io/pen . Il y a probablement une façon d'arriver au résultat que tu souhaites, mais il nous faut voir comment s'articule ta page.

Cdt,

Merci kustolovic ça marche nickel !!