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: https://pt.stackoverflow.com/questions/290626/como-posicionar-um-button-em-qualquer-lugar-da-tela-em-html/290638#290638

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>