Alinhar no centro com Tansform
Eu tinha visto uma vez um código que eles alinhavam no centro com o transform, mas não sei direito como funciona, alguém saberia me ajudar?
Dayan Barros
Curtidas 0
Melhor post
Raphael Alves
05/05/2017
Fala ae cara,
Você pode fazer isso usando as propriedades left e translate baseadas em porcentagem, por exemplo:
Dá uma testada aí, abraaço!
Você pode fazer isso usando as propriedades left e translate baseadas em porcentagem, por exemplo:
<style>
.container {
display: block;
background-color: green;
position: relative;
width: 100px;
height: 100px;
left: 50%;
transform: translateX(-50%);
}
</style>
<div class="container"></div>
Dá uma testada aí, abraaço!
GOSTEI 1
Mais Respostas
Dayan Barros
05/05/2017
Então se eu for utilizar no top ou bottom para alinhar na vertical, também funciona?
Abs
Abs
GOSTEI 0
Raphael Alves
05/05/2017
Então se eu for utilizar no top ou bottom para alinhar na vertical, também funciona?
Abs
Abs
Funciona sim, mas você teria que usar "translateY" ao invés do "X", ou até mesmo usar "transform: translate(0%, -50%);" que serve tanto pro eixo X quanto pro eixo Y.
Abraaço.
GOSTEI 0
Dayan Barros
05/05/2017
Então se eu for utilizar no top ou bottom para alinhar na vertical, também funciona?
Abs
Abs
Funciona sim, mas você teria que usar "translateY" ao invés do "X", ou até mesmo usar "transform: translate(0%, -50%);" que serve tanto pro eixo X quanto pro eixo Y.
Abraaço.
Muito obrigado, eu uso o flexbox geralmente, mas tem vezes que não tenho o height da div e acabo não conseguindo centralizar. Como esse usa position absolute, vi que dava.
Show de bolaaaaa!!!
GOSTEI 0