web-dev-qa-db-fra.com

Comment centrer un élément html dans la fenêtre du navigateur?

Comment puis-je placer un élément html, disons div, au milieu d'une fenêtre de navigateur (pas de page, ni d'écran)? Ne dépend pas de la taille de la fenêtre du navigateur, de la résolution de l'écran, de la disposition de la barre d'outils, etc. Je veux que ce soit au milieu de la fenêtre du navigateur.

Merci

htmlcenter
53
Kamarey

J'ai surpris que personne ne dise à propos de la position = fixe. Il fait exactement ce que j'ai demandé et fonctionne dans tous les navigateurs "humains" et IE depuis 7.

11
Kamarey

Pour ce faire, vous devez connaître la taille de l'élément que vous centrez. Toute mesure fera l'affaire (c'est-à-dire px, em, pourcent), mais sa taille doit être fixe.

Le css ressemblera à ceci:

 // Replace X and Y with a number and u with a unit. do calculations
 // and remove parens
.centered_div {
   width: Xu;
   height: Yu;
   position: absolute;
   top: 50%;
   left: 50%;
   margin-left: -(X/2)u;
   margin-top: -(Y/2)u;
}

Edit : Ceci est centré dans la fenêtre. Vous pouvez uniquement centrer dans la fenêtre du navigateur à l'aide de JavaScript. Mais cela pourrait suffire de toute façon, puisque vous voulez probablement afficher une boîte contextuelle/modale?

36
PatrikAkerstrand
div#wrapper {
    position: absolute;
    top:  50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
13
Saman Sadeghpour

Ceci est tout à fait possible avec juste CSS - aucun JavaScript requis: Voici un exemple

Voici le code source derrière cet exemple:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>  
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1">
<title>Dead Centre</title>  
<style type="text/css" media="screen"><!--
body 
    {
    color: white;
    background-color: #003;
    margin: 0px
    }

#horizon        
    {
    color: white;
    background-color: transparent;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 0px;
    width: 100%;
    height: 1px;
    overflow: visible;
    visibility: visible;
    display: block
    }

#content    
    {
    font-family: Verdana, Geneva, Arial, sans-serif;
    background-color: transparent;
    margin-left: -125px;
    position: absolute;
    top: -35px;
    left: 50%;
    width: 250px;
    height: 70px;
    visibility: visible
    }

.bodytext 
    {
    font-size: 14px
    }

.headline 
    {
    font-weight: bold;
    font-size: 24px
    }

#footer 
    {
    font-size: 11px;
    font-family: Verdana, Geneva, Arial, sans-serif;
    text-align: center;
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 20px;
    visibility: visible;
    display: block
    }

a:link, a:visited 
    {
    color: #06f;
    text-decoration: none
    }

a:hover 
    {
    color: red;
    text-decoration: none
    }

--></style>
</head>
<body>
<div id="horizon">
    <div id="content">
        <div class="bodytext">
        This text is<br>
        <span class="headline">DEAD CENTRE</span><br>
        and stays there!</div>
    </div>
</div>
<div id="footer">
    <a href="http://www.wpdfd.com/editorial/thebox/deadcentre4.html">view construction</a></div>
</body>
</html>
11
Cuga

Voici:

  • Solution HTML + CSS uniquement - aucun JavaScript requis
  • Il n'est pas nécessaire que vous connaissiez la taille du contenu à l'avance.
  • Le contenu est centré sur le redimensionnement de la fenêtre

Et l'exemple:

<!DOCTYPE html>
<html>
    <head>
        <title>HTML centering</title>

        <style type="text/css">
        <!--
        html, body, #tbl_wrap { height: 100%; width: 100%; padding: 0; margin: 0; }
        #td_wrap { vertical-align: middle; text-align: center; }
        -->
        </style>
    </head>

    <body>
        <table id="tbl_wrap"><tbody><tr><td id="td_wrap">
        <!-- START: Anything between these wrapper comment lines will be centered -->


<div style="border: 1px solid black; display: inline-block;">
This content will be centered.
</div>

        <!-- END: Anything between these wrapper comment lines will be centered -->
        </td></tr></tbody></table>
    </body>
</html>

Jetez un coup d'œil à l'URL d'origine pour plus d'informations: http://krustev.net/html_center_content.html

Vous pouvez faire ce que vous voulez avec ce code. La seule condition est que tout travail dérivé doit faire référence à l'auteur original.

11
Delian Krustev

Si vous ne connaissez pas la taille du navigateur, vous pouvez simplement centrer en CSS avec le code suivant:

Code HTML:

<div class="firstDiv">Some Text</div>

Code CSS:

 .firstDiv {
  width: 500px;

  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  background-color: #F1F1F1;
 }

Cela aide également à tout changement imprévu dans le futur. 

6
Anand Mohanty

J'ai eu beaucoup de problèmes de centrage et d'alignement jusqu'à ce que je trouve Flexbox comme recommandation dans un guide.

Un guide complet sur Flexbox

Je vais poster un extrait (qui fonctionne avec Chrome) ici pour plus de commodité:

<head>
    <style type="text/css">
        html
        {
            width: 100%;
            height: 100%;
        }

        body
        {
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>

<body>
    This is text!
</body>

Pour plus de détails, veuillez vous référer à l'article.

4
yaganox

Pour centrer une div, vous devez appliquer le style

div 
{
    margin: 0 auto;
}
2
gonzohunter
<div align="center">

ou

<div style="margin: 0 auto;">
1
threadhack

Ceci est vérifié et fonctionne dans tous les navigateurs.

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

        <style type="text/css">
            html, body { margin: 0; padding: 0; height: 100%; }

            #outer {height: 100%; overflow: hidden; position: relative; width: 100%;}
            #outer[id] {display: table; position: static;}

            #middle {position: absolute; top: 50%; width: 100%; text-align: center;}
            #middle[id] {display: table-cell; vertical-align: middle; position: static;}

            #inner {position: relative; top: -50%; text-align: left;}
            #inner {margin-left: auto; margin-right: auto;}
            #inner {width: 300px; } /* this width should be the width of the box you want centered */
        </style>
    </head>
    <body>

        <div id="outer">
            <div id="middle">
                <div id="inner">
                    centered
                </div>
            </div>
        </div>

    </body>
</html>
1
Michal M

Je ne pense pas que vous puissiez faire ça. Vous pouvez être au milieu du document, mais vous ne connaissez ni la disposition de la barre d’outils ni la taille des contrôles du navigateur. Ainsi, vous pouvez centrer le document, mais pas au milieu de la fenêtre du navigateur.

0
Pim Jager

Si j'ai bien compris, vous souhaitez centrer l'élément verticalement et horizontalement en fonction de la fenêtre, pas du document. Cela peut être un peu pénible, mais vous pouvez utiliser javascript pour détecter la taille de la fenêtre, la position du défilement, la taille de l'élément, etc.

Si vous voulez que cet élément reste dans le module de la fenêtre lorsque vous faites défiler, vous devez capturer l'événement de défilement et ajuster la position.

Le code permettant de faire cela diffère d'un navigateur à l'autre.

0
James Conigliaro

Vous pouvez écrire un script JavaScript pour trouver la hauteur et la largeur de la fenêtre et le réduire de moitié pour trouver le point central.

Ajoutez votre contenu dans une balise, puis définissez le div en haut et à gauche du javascript sur les coordonnées du centre que vous avez trouvées à l'aide de Javascript.

Faites-moi savoir si vous avez besoin du code.

0
Bhaskar

Cela devrait fonctionner avec n’importe quelle div ou taille d’écran:

.center-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
}
 <html>
 <head>
 </head>
 <body>
 <div class="center-screen">
 I'm in the center
 </div>
 </body>
 </html>

Voir plus de détails sur flexici . Cela devrait fonctionner sur la plupart des navigateurs, voir la matrice de compatibilité ici .

0
Caner

J'espère que cela t'aides. L'astuce consiste à utiliser le positionnement absolu et à configurer les colonnes supérieure et gauche. Bien sûr, le "point mort" dépendra de la taille de l'objet/de la div que vous intégrez. Vous devrez donc travailler. Pour une fenêtre de connexion, j'ai utilisé ce qui suit - cela a aussi une certaine sécurité avec max-width et max-height qui peut réellement vous être utile dans votre exemple. Configurez les valeurs ci-dessous selon vos besoins.

div#wrapper {
    border: 0;
    width: 65%;
    text-align: left;
    position: absolute;
    top:  20%;
    left: 18%;
    height: 50%;
    min-width: 600px;
    max-width: 800px;
}
0
Ryan Oberoi

Solution de travail. 

<html>
          <head>
            <style type="text/css">
                html
                {
                    width: 100%;
                    height: 100%;
                }

                body
                {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
            </style>
        </head>

        <body>
            Center aligned text.(horizontal and vertical side)
        </body>
</html>
0
Vinayak

Ça marche pour moi :).

div.parent {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
0
Kiry Meas