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>