Skip to main content
3 de 3
Correção no título
Sam
  • 80,8mil
  • 22
  • 73
  • 128

Centralização perfeita de elementos usando o transform:translate <style>

Em uma outra pergunta que fiz antes, um usuário me deu um exemplo de como eu poderia deixar perfeitamente centralizado um botão html na tela.

Foi nesta pergunta: Como posicionar um button em qualquer lugar da tela, em html

Ele simplesmente fez:

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

Só que eu tentei centralizar três botões abaixo, partindo do mesmo padrão, mas não funciona...

Pelo que eu vi na doc, o translate muda a posição de um objeto na tela a partir da multiplicação da matriz de posição do objeto por um vetor. Nesse caso, preciso ter a informação da posição em pixels pra poder fazer esse cálculo, e ter uma ideia de qual o valor de translate aplicar, certo? Ou tem um jeito mais fácil.

Segue o meu código:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
    #centralizado1 {position:absolute; top=46%; left=50%; transform:translate(-46%, -50%)}
    #centralizado2 {position:absolute; top=50%; left=50%; transform:translate(-50%, -50%)}
    #centralizado3 {position:absolute; top=54%; left=50%; transform:translate(-54%, -50%)}  
</style> 

<body>

<div id="centralizado1">
       <button >A</button>
</div>

<div id="centralizado2">
     <button>B</button>
</div>

<div id="centralizado3">
       <button>C</button
</div>

</body>
</html>
Lucas Pletsch
  • 833
  • 4
  • 16
  • 39