web-dev-qa-db-fra.com

Comment mettre un div au centre du navigateur en utilisant CSS?

Comment mettre un div dans centre du navigateur à la fois verticalement et horizontalement en utilisant uniquement CSS?

Assurez-vous que cela fonctionne aussi sur IE7.

Si tout échoue, nous pouvons utiliser JavaScript, mais un dernier choix.

csslayout
39
jimTong

HTML:

<div id="something">... content ...</div>

CSS:

#something {
    position: absolute;
    height: 200px;
    width: 400px;
    margin: -100px 0 0 -200px;
    top: 50%;
    left: 50%;
}
75
James

La solution la plus simple consiste simplement à utiliser une marge automatique et à donner à votre div une largeur et une hauteur fixes. Cela fonctionnera 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;
}

MODIFIER!! Désolé, je viens de remarquer que vous avez dit verticalement ... la marge "auto" par défaut pour le haut et le bas est égale à zéro ... elle ne sera donc centrée que horizontalement. La seule solution pour se positionner verticalement et horizontalement consiste à déblayer avec des marges négatives comme la réponse acceptée.

26
jrista
margin: auto;
11
Rony

essaye ça

#center_div
{
       margin: auto;
       position: absolute;
       top: 0; 
       left: 0;
       bottom: 0; 
       right: 0;
 }
6
M98

Vous pouvez également définir votre div avec les éléments suivants:

#something {width: 400px; margin: auto;}

Avec ce paramètre, le div aura une largeur définie, et la marge et les deux côtés seront automatiquement définis en fonction du avec du navigateur.

2
Chris

En utilisant ceci:

center-div { margin: auto; position: absolute; top: 50%; left: 50%; bottom: 0; right: 0; transform: translate(-50% -50%); }
2
Ajay Kumar
<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é dans FF2-3, IE6-7, Opera et fonctionne bien!

1
Rado
.center {
  margin: auto;
  margin-top: 15vh;
}

Devrait faire l'affaire

1
Cengkuru Michael

Pour les anciens navigateurs, vous devez ajouter cette ligne au-dessus de la documentation HTML.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
0
user2567780