1

Gente é o seguinte eu tenho uma div pai e uma outra div com um texto em position absolute... esse texto esta alinhado ao top e a esquerda da div pai e eu preciso alinhar ao centro... coisas como top: x% ou left x% .. n funcionam pois o elemento pai é dinamico e responsivo ...preciso que fique mesmo ao centro .. tentei coisas como justify content e align items no centro mas não adiantou.. alguem sabe como... segue o codigo da div :

.textotoposobre{
    text-align: center;
    color: white;
    font-family: 'Open Sans';
    align-items: center;
    justify-content: center;
    top: 30%;
    left: 28%;
}
2
  • Um site muito útil para aprender como centralizar elementos e texto em CSS é o <a href="howtocenterincss.com/">howtocenterincss.com</a>. Ele permite escolher a altura e largura do elemento, o alinhamento do conteúdo e que versões do internet explorer você precisa que o código funcione. Commented 20/01/2017 às 11:37
  • vou dar uma olhada obg
    – André
    Commented 20/01/2017 às 15:42

2 Respostas 2

5

Criando uma div pai com position: relative, e a div filho com position: absolute devem resolver o seu problema, desde que a div filho esteja posicionada a uma distância equivalente à 50% do container (div pai) menos a metade do seu próprio tamanho. Essa distância deve valer tanto para cima quanto para à esquerda. Isto pode ser realizado da seguinte maneira:

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

Veja que, desta maneira, o tamanho da div pai não interessa.

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

.pai{
    position: relative;
    width: 300px;
    height: 300px;
    background-color: aqua; 
}
<div class="pai">
    <div class="filho">Texto texto texto</div>
</div>

Experimente alterar o tamanho da div pai para entender o comportamento.

1
  • obrigado vou tentar aqui
    – André
    Commented 20/01/2017 às 10:54
0

Na div do texto coloque **margin: 0 auto;**

1
  • Penso que como tem position: absolute; não vai centrar nada. Commented 26/03/2018 às 17:11

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 .