Como centralizar a tela em html5

105

Há algum tempo procuro uma solução, mas não encontrei nada. Talvez sejam apenas meus termos de pesquisa. Bem, estou tentando fazer o centro da tela de acordo com o tamanho da janela do navegador. A tela é 800x600. E se a janela ficar abaixo de 800x600, ela também deve ser redimensionada (mas isso não é muito importante no momento)

html canvas css resize Jorgen
fonte
Como faço para fazer uma tela de página inteira sem fornecer dimensões e sem barras de rolagem ao redimensionar?
jorgen
2
Não faça isso em HTML .. faça com javascript, use coisas como appendChild ou algo assim e defina a largura e a altura para window.innerWidth e window.innerHeight
o JinX de

Respostas:

173

Dê à tela as seguintes propriedades de estilo css:

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

Editar

Como essa resposta é bastante popular, deixe-me acrescentar mais alguns detalhes.

As propriedades acima irão centralizar horizontalmente a tela, div ou qualquer outro nó que você tenha em relação a seu pai. Não há necessidade de alterar as margens superior ou inferior e os preenchimentos. Você especifica uma largura e permite que o navegador preencha o espaço restante com as margens automáticas.

No entanto, se quiser digitar menos, você pode usar quaisquer propriedades abreviadas css que desejar, como

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

Centralizar a tela verticalmente requer uma abordagem diferente. Você precisa usar o posicionamento absoluto e especificar a largura e a altura. Em seguida, defina as propriedades esquerda, direita, superior e inferior como 0 e deixe o navegador preencher o espaço restante com as margens automáticas.

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

A tela se centralizará com base no primeiro elemento pai positiondefinido como relativeou absolute, ou no corpo se nenhum for encontrado.

Outra abordagem seria usar display: flex, que está disponível no IE11

Além disso, certifique-se de usar um doctype recente, como xhtml ou html 5.

Marco Luglio
fonte
8
display: bloco; e margem: 0 auto 0 auto; é o suficiente também. THX!
Chris
Para centralizar verticalmente uma tela, você não precisa colocar a largura e a altura, desde que especifique no HTML. No cromo, de qualquer maneira.
Zac
1
A largura e a altura podem ser especificadas em css ou html. Mas css é a forma recomendada, já que toda a lógica de apresentação deve ir para lá.
Marco Luglio
1
Está centralizando a tela, mas se houver uma imagem desenhada na tela, ela está se esticando. Você pode centralizar a tela sem esticar a imagem
ariano
Definir altura e largura em estilos embutidos no elemento de tela bagunçou o tamanho das minhas imagens desenhadas e tal. Apenas uma advertência que, com sorte, evitará a frustração de alguém.
MrBoJangles de
52

Você pode dar à sua tela as propriedades CSS ff:

#myCanvas
{
    display: block;
    margin: 0 auto;
}
Jinmichaelr
fonte
Você pode fornecer um jsfiddle? Esta abordagem parece não funcionar
jose.angel.jimenez
3
Isso funciona para centralização horizontal, mas não para centralização vertical.
Matty J
20

Basta centralizar o div em HTML:

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


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

Basta alterar a altura e largura para qualquer coisa e você terá um div centralizado

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

JoeCianflone
fonte
Sorte minha, eu precisava disso logo depois que você postou. :)
mcandre
5
Isso não funciona se a tela for menor que o contêiner.
SystemicPlural
8

Para centralizar o elemento canvas horizontalmente, você deve especificá-lo como um nível de bloco e deixar suas propriedades de margem esquerda e direita para o navegador:

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

Se você quiser centralizá-lo verticalmente, o elemento de tela precisa estar absolutamente posicionado:

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

Se você quiser centralizá-lo horizontalmente e verticalmente, faça:

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

Para obter mais informações, visite: https://www.w3.org/Style/Examples/007/center.en.html

Konkret
fonte
5

As respostas acima só funcionam se a sua tela tiver a mesma largura do contêiner.

Isso funciona independentemente:

#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>
Expandir trecho

SystemicPlural
fonte
3

Use este código:

<!DOCTYPE html>
<html>
<head>
<style>
.text-center{
    text-align:center;
    margin-left:auto;
    margin-right:auto;
}
</style>
</head>
<body>

<div class="text-center">
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
Your browser does not support the HTML5 canvas tag.
</canvas>
</div>

</body>
</html>
Keyur Patel
fonte
2

Eu tive o mesmo problema, pois tenho fotos com muitas larguras diferentes que carrego apenas com informações de altura. Definir uma largura permite que o navegador estique e comprima a imagem. Eu resolvo o problema tendo a linha de texto logo antes da linha image_tag centralizada (também eliminando float: left;). Eu gostaria que o texto fosse alinhado à esquerda, mas isso é um pequeno inconveniente, que posso tolerar.

MDM
fonte
0

Adicione text-align: center;à tag pai de <canvas>. É isso aí.

Exemplo:

<div style="text-align: center">
    <canvas width="300" height="300">
        <!--your canvas code -->
    </canvas>
</div>
Raj Yadav
fonte
isso é simples, então usando css
Clifton Avil D'Souza