2

Meus caros, sempre usei a tática abaixo para centralizar meus elementos na vertical que estão contidos em algo com position absolute, mas de um tempo para cá ele não vem mais funcionando, o elemento simplesmente não centraliza mas passa muito do que seria o centro.

Eu estou fazendo algo de errado ou esse método já não funfa mais?

position: relative
top: 50%;
transform: translateY(-50%);

Estou fazendo assim:

.content {
  position: relative;
  height: 100%;
  width: 100%;
}

.content .central {
  width: 60%;
  height: 100%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 50%;
  transform: translateX(-50%);
}
<section class="content">

  <div class="central">

    <h1><b>Texto de teste</b></h1>

  </div>


</section>

3

1 Resposta 1

1

Olha o que acontece quando vc declara o translate 2x, o browser só reconhece o segundo, pois ele sobrescreve o primeiro

inserir a descrição da imagem aqui

O correto seria usar o long-hand assim:

transform: translateY(-50%) translateX(-50%);  

Ou o short-hand assim:

transform: translate(-50%, -50%);  

Onde o o primeiro 50% é no eixo X e o segundo 50% é o eixo Y

Coloquei uma borda apenas para vc ver que o elemento está centralizado

inserir a descrição da imagem aqui

.content {
    position: relative;
    height: 100%;
    width: 100%;

}

.content .central {
    width: 60%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    border: 1px solid #000;
}
<section class="content">

    <div class="central">

        <h1><b>Texto de teste</b></h1>

    </div>

</section>

2
  • 1
    Entendi o erro que estava cometendo! Resposta completíssima, obg! Commented 16/07/2019 às 14:38
  • @LeonardoHenrique sem problemas, tenha em mente que isso vale para outras propriedades como background por exemplo. []´s
    – hugocsl
    Commented 16/07/2019 às 14:57

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .