Comment mettre un div dans centre du navigateur à la fois verticalement et horizontalement en utilisant CSS seulement?Comment mettre un div dans le centre du navigateur en utilisant CSS?
Assurez-vous que cela fonctionne également sur IE7.
Si tout échoue, nous pouvons utiliser JavaScript, mais un dernier choix.
HTML:
<div id="something">... content ...</div>
CSS:
#something {
position: absolute;
height: 200px;
width: 400px;
margin: -100px 0 0 -200px;
top: 50%;
left: 50%;
}
La solution est juste d'utiliser une marge plus simple auto, et donner à votre div une largeur et une hauteur. Cela fonctionne dans IE7, FF, Opera, Safari et Chrome:
HTML:
<body>
<div class="centered">...</div>
</body>
CSS:
body { width: 100%; height: 100%; margin: 0px; padding: 0px; }
.centered
{
margin: auto;
width: 400px;
height: 200px;
}
EDIT !! Désolé, je viens de remarquer que vous avez dit verticalement ... la marge "auto" par défaut pour le haut et le bas est zéro ... donc cela ne fera que le centrer horizontalement. La seule solution pour positionner verticalement et horizontalement est de balancer avec des marges négatives comme la réponse acceptée.
Vous pouvez également configurer votre div avec les éléments suivants:
#something {width: 400px; margin: auto;}
Avec ce paramètre, la div aura un ensemble avec, et la marge et de chaque côté sera réglée automatiquement en fonction de la avec du navigateur.
<html>
<head>
<style>
*
{
margin:0;
padding:0;
}
html, body
{
height:100%;
}
#distance
{
width:1px;
height:50%;
margin-bottom:-300px;
float:left;
}
#something
{
position:relative;
margin:0 auto;
text-align:left;
clear:left;
width:800px;
min-height:600px;
height:auto;
border: solid 1px #993333;
z-index: 0;
}
/* for Internet Explorer */
* html #something{
height: 600px;
}
</style>
</head>
<body>
<div id="distance"></div>
<div id="something">
</div>
</body>
</html>
testés dans FF2-3, IE6-7, Opéra et fonctionne bien!
Pour les navigateurs plus anciens, vous devez ajouter cette ligne au-dessus de HTML doc
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
essayer cette
#center_div
{
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
En utilisant ceci:
center-div { margin: auto; position: absolute; top: 50%; left: 50%; bottom: 0; right: 0; transform: translate(-50% -50%); }
.center {
margin: auto;
margin-top: 15vh;
}
Si faire l'affaire
Pourquoi une marge négative ici? Merci! –
Parce qu'il compense la taille de la div. top et left set à 50% ferait le haut et à gauche de l'élément au milieu de la page, pas l'élément lui-même. Les marges négatives sont exactement la moitié de la taille de l'élément et constituent la différence de sorte que l'élément lui-même est centré, et pas seulement ses côtés supérieur et gauche. – tj111
Ew. Pourquoi auriez-vous besoin de positionner absolument? Utilisez le modèle de boîte comme il a été conçu. –