Come centrare la tela in html5

Question

Sto cercando una soluzione da un po 'ora, ma non ho trovato nulla. Forse sono solo i miei termini di ricerca. Bene, sto provando a fare il centro della tela in base alle dimensioni della finestra del browser. La tela è 800x600. E se la finestra scende al di sotto 800x600, dovrebbe ridimensionare pure (ma questo non è molto importante in questo momento)

Answer 1

Basta centrare il div in HTML:

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


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

Basta cambiare l'altezza e la larghezza a qualunque e hai un div centrato

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

Answer 2

Dare la tela le seguenti proprietà di stile CSS:

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

---

Modifica

Dal momento che questa risposta è molto popolare, mi permetta di aggiungere un po 'più particolari.

Le proprietà di cui sopra saranno in orizzontale centra il canvas, div o qualsiasi altro nodo che si ha rispetto al suo genitore. Non è necessario modificare i margini o gli imbottiture superiori o inferiori. Si specifica una larghezza e si lascia che il browser riempia lo spazio rimanente con i margini automatici.

Tuttavia, se si desidera digitare meno, è possibile utilizzare qualsiasi scorciatoia css proprietà che si desidera, ad esempio

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

centraggio tela verticale richiede un approccio diverso però. È necessario utilizzare il posizionamento assoluto e specificare sia la larghezza che l'altezza. Quindi imposta le proprietà sinistra, destra, superiore e inferiore su 0 e lascia che il browser riempia lo spazio rimanente con i margini automatici.

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

La tela sarà centrare si è basata sul primo elemento padre che ha position insieme a relative o absolute, o il corpo, se non viene trovato.

Un altro approccio sarebbe quello di utilizzare display: flex, che è disponibile in IE11

Inoltre, assicurarsi di utilizzare un recente doctype come XHTML o HTML 5.

Answer 3

ho avuto lo stesso problema, come ho avere immagini con molte larghezze diverse che carico solo con informazioni di altezza. L'impostazione di una larghezza consente al browser di allungare e spremere l'immagine. Risolvo il problema avendo la riga di testo appena prima centrata la linea image_tag (anche liberando float: left;). Mi sarebbe piaciuto che il testo fosse allineato, ma questa è una piccola incongruenza, che posso tollerare.

Answer 4

Puoi esprimere la tua tela le proprietà CSS FF:

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

Answer 5

Le risposte di cui sopra funzionano solo se la tela è la stessa larghezza del contenitore.

Questo funziona indipendentemente:

#container { 
 
    width: 100px; 
 
    height:100px; 
 
    border: 1px solid red; 
 
    
 
    
 
    margin: 0px auto; 
 
    text-align: center; 
 
} 
 

 
#canvas { 
 
    border: 1px solid blue; 
 
    width: 50px; 
 
    height: 100px; 
 
    
 
}

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