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

Question

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

Comment puis-je placer un élément html, dire div, au milieu d'une fenêtre de navigateur (pas la page, pas 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. Par exemple, je veux qu'il soit au milieu de la fenêtre du navigateur .

Merci

52

center html

demandé sur iliketocode 2009-06-11 20:09:58

18 réponses

score 36 · Answer 1

Pour ce faire, vous devez connaître la taille de l'élément de centrage. Toute mesure fera l'affaire (c'est-à-dire px, em, pourcentage), mais elle doit avoir une taille fixe.

Le css se présente comme suit:

 // 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 : ce centre dans la fenêtre d'affichage. Vous ne pouvez centrer dans la fenêtre du navigateur en utilisant JavaScript. Mais cela pourrait être assez bon de toute façon, puisque vous voulez probablement afficher une boîte popup/modal?

score 11 · Answer 2

C'est tout à fait possible avec juste CSS - pas de JavaScript nécessaire: 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>

score 11 · Answer 3

Voici:

solution HTML + CSS uniquement - pas besoin de JavaScript
il ne nécessite pas 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 oeil à 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 avoir une référence à la auteur original.

score 10 · Answer 4

J'ai surpris que personne n'ait dit à propos de position = fixed. Il fait exactement ce que j'ai demandé et fonctionne dans tous les navigateurs "humains" et IE depuis 7.

score 10 · Answer 5

div#wrapper {
    position: absolute;
    top:  50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

score 4 · Answer 6

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

Un Guide complet de 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.

score 4 · Answer 7

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.

score 2 · Answer 8

Pour centrer un div, vous devez appliquer le style

div 
{
    margin: 0 auto;
}

2

répondu gonzohunter 2009-06-11 16:20:39

score 1 · Answer 9

<div align="center">

Ou

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

1

répondu threadhack 2009-06-11 16:16:03

score 1 · Answer 10

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>

score 1 · Answer 11

C'est une excellente approche tenant compte du Absolue de Centrage

Compatibilité du navigateur: Chrome, Firefox, Safari, Safari Mobile, IE8-10.

Avantages:

navigateur croisé (y compris IE8-10)
Pas de balisage spécial, styles minimaux
réactif avec des pourcentages et min - / max -
utilisez une classe pour centrer tout contenu
centré indépendamment du rembourrage (sans boîte-dimensionnement!)
Blocs peuvent facilement être redimensionné
Fonctionne très bien sur les images

Mises en garde:

La hauteur doit être déclarée (voir hauteur Variable)
recommander de définir overflow: auto pour éviter les débordements de contenu (voir Overflow)
ne fonctionne pas sur Windows Phone

score 0 · Answer 12

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

score 0 · Answer 13

Si je comprends bien, vous voulez 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. et puis positionnez l'élément au centre de la fenêtre (pas le document, mais la fenêtre visible).

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

Le code pour cela diffère d'un navigateur à l'autre.

score 0 · Answer 14

Vous pouvez écrire un JavaScript wto trouver la hauteur et la largeur de la fenêtre et le faire à moitié pour trouver le point central.

Ajoutez des éléments à l'intérieur d'une balise, et définissez le div en haut et à gauche du javascript sur les coordonnées centrales que vous avez trouvées en utilisant Javascript.

Faites-moi savoir si vous avez besoin du code.

score 0 · Answer 15

J'espère que cela aide. L'astuce consiste à utiliser un positionnement absolu et à configurer les colonnes supérieure et gauche. Bien sûr, "en plein centre" dépendra de la taille de l'objet/div que vous intégrez, vous aurez besoin de faire quelques travaux. Pour une fenêtre de connexion, j'ai utilisé ce qui suit - il 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;
}

score 0 · Answer 16

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>

score 0 · Answer 17

Cela fonctionne pour moi :).

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

score -1 · Answer 18

Vous pouvez centrer n'importe quel objet dans la fenêtre, voici un exemple en utilisant jquery

$(document).ready(function()
{


posicionar("#midiv");
$(window).on("resize", function() {
    posicionar("#midiv");   
});

function posicionar(elemento){
    var altoDocumento = $(window).height();//alto
    var anchoDocumento = $(window).width();
    //console.log(altoDocumento);
    //console.log(anchoDocumento);
    var centroXDocumento = anchoDocumento / 2;
    var centroYDocumento = altoDocumento / 2;
    //console.log(centroXDocumemnto,centroYDocumento);
    var altoElemento = $(elemento).outerHeight(true);//ancho real del elemento
    var anchoElemento = $(elemento).outerWidth(true);//alto 

    var centroXElemento = anchoElemento / 2;// centro x del elemento
    var centroYElemento = altoElemento / 2; // centro y del elemento

    var posicionXElemento = centroXDocumento - centroXElemento;
    var posicionYElemento = centroYDocumento - centroYElemento;

    $(elemento).css("position","absolute");
    $(elemento).css("top", posicionYElemento);
    $(elemento).css("left", posicionXElemento);
}
});

Le code html

<div id="midiv"></div>

REMARQUE: Vous devez exécuter la fonction onDomReady et lorsque la fenêtre se redimensionne.

Voici de jsfiddle http://jsfiddle.net/geomorillo/v82x6/

Las etiquetas más populares

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

18 réponses

Avantages:

Mises en garde: