Comment centrer le canevas en html5

Question

Cela fait un moment que je cherche une solution, mais je n'ai rien trouvé. Peut-être que c'est juste mes termes de recherche. J'essaie de centrer la toile en fonction de la taille de la fenêtre du navigateur. La toile est de 800x600. Et si la fenêtre devient inférieure à 800x600, elle devrait également être redimensionnée (mais ce n'est pas très important pour le moment).

Answer 1

Donnez au canevas les propriétés de style css suivantes :

canvas {
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 800px;
}

---

Editar

Comme cette réponse est assez populaire, permettez-moi d'ajouter un peu plus de détails.

Les propriétés ci-dessus horizontalement centre le canevas, le div ou tout autre nœud que vous avez par rapport à son parent. Il n'est pas nécessaire de modifier les marges supérieures ou inférieures et les paddings. Vous spécifiez une largeur et laissez le navigateur remplir l'espace restant avec les marges automatiques.

Toutefois, si vous souhaitez réduire le nombre de caractères, vous pouvez utiliser les propriétés de raccourci css que vous souhaitez, telles que

canvas {
    padding: 0;
    margin: auto;
    display: block;
    width: 800px;
}

Centrer la toile verticalement nécessite toutefois une approche différente. Vous devez utiliser le positionnement absolu, et spécifier à la fois la largeur et la hauteur. Définissez ensuite les propriétés gauche, droite, haut et bas à 0 et laissez le navigateur remplir l'espace restant avec les marges automatiques.

canvas {
    padding: 0;
    margin: auto;
    display: block;
    width: 800px;
    height: 600px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

Le canevas se centrera en fonction du premier élément parent qui possède la propriété position réglé sur relative o absolute ou le corps si aucun n'est trouvé.

Une autre approche serait d'utiliser display: flex qui est disponible dans IE11

Veillez également à utiliser un doctype récent tel que xhtml ou html 5.

Answer 2

Vous pouvez donner à votre toile les propriétés CSS suivantes :

#myCanvas
{
    display: block;
    margin: 0 auto;
}

Answer 3

Pour centrer l'élément de toile horizontalement, vous devez le spécifier comme un niveau de bloc et laisser au navigateur le soin de définir ses propriétés de marge gauche et droite :

canvas{
    margin-right: auto;
    margin-left: auto;
    display: block;
}

Si vous voulez le centrer verticalement, l'élément de toile doit être positionné de manière absolue :

canvas{
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);              
}

Si vous vouliez le centrer horizontalement et verticalement, faites-le :

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

Pour plus d'informations, visitez le site : https://www.w3.org/Style/Examples/007/center.en.html

Answer 4

Il suffit de centrer le div en HTML :

  #test {
     width: 100px;
     height:100px;
     margin: 0px auto;
     border: 1px solid red;
   }

<div id="test">
   <canvas width="100" height="100"></canvas>
</div>

Il suffit de changer la hauteur et la largeur pour avoir un div centré.

http://jsfiddle.net/BVghc/2/

Answer 5

Vous pouvez également utiliser Flexbox, mais la canvas doit se trouver à l'intérieur d'un élément div en l'appliquant simplement à la canvas ne fonctionnera pas.

HTML :

<div class="canvas-container">
    <canvas width="150" height="200"></canvas>
</div>

CSS :

.canvas-container {
    display: flex;
    align-items: center;
    justify-content: center;
}