Centrer V et H une image dans une <div> en css

super-S 5 Messages postés jeudi 30 mars 2017Date d'inscription 5 mars 2018 Dernière intervention - 5 mars 2018 à 13:58 - Dernière réponse : gleinense 10 Messages postés dimanche 11 mars 2018Date d'inscription 19 mars 2018 Dernière intervention
- 12 mars 2018 à 00:51
Bonjour à tous,

Il va falloir m'expliquer.
Je cherche simplement à centrer verticalement et horizontalement une image dans une <div>
Horizontalement c'est pas compliqué (margin-left: auto et margin right: auto), mais verticalement...

Je n'ai pas de <div> parent ou enfant, pas de <div> imbriquées, Pas de display : block ou inline-block, pas de flex.
Je veux juste que mon image arrive toujours au centre de la page.

ca marche avec un tableau ?!! avec align="absmiddle"
mais plus personne n'utilise de tableau !!!

Je trouve ça fou. Je viens de me taper 50 forums, avec tous des méthodes différentes (marges négatives, et autres).
Par curiosité j'aimerai comprendre pourquoi c'est si compliqué.
pourquoi margin-top: auto et margin-bottom : auto, ne fonctionne pas. Alors que ça fonctionne horizontalement ?
On en est au css3, html5, etc. et foutre une p*****?!! d'image au centre de la page... enfin...

Merci d'avance.
Merci à codes-sources d'exister (même si là j'ai un peu honte)

Mon code (vous allez voir c'est con):
<head>
<style>
body { background-image: url(images/bg.png);}

.home {
<style>
body { background-image: url(images/bg.png);}

.home {
text-align: center;
margin-left : auto;
margin-right: auto;
}
</style>
</head>


<body>
<div class="home">
<a href="https://www.monsite.com"><img src="images/img.png" alt=""></a>
</div>
</body>
Afficher la suite 

Votre réponse

1 réponse

gleinense 10 Messages postés dimanche 11 mars 2018Date d'inscription 19 mars 2018 Dernière intervention - Modifié par gleinense le 12/03/2018 à 00:54
0
Merci
Pour centrer verticalement il faut utiliser un " line-height " qui aura la même valeur que le height de ton div:

line-height: 200px;
height: 200px;

Note : Ces valeurs s'applique au div pas à l'image
Commenter la réponse de gleinense

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.