F�rum Alinhar no centro com Tansform #580990

05/05/2017

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

Curtir t�pico

+ 0

Responder

Post mais votado

05/05/2017

Fala ae cara,

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!

Raphael Alves

Responder

Gostei + 1

Mais Posts

08/05/2017

Dayan Barros

Ent�o se eu for utilizar no top ou bottom para alinhar na vertical, tamb�m funciona?

Abs

Responder

Gostei + 0

09/05/2017

Raphael Alves

Ent�o se eu for utilizar no top ou bottom para alinhar na vertical, tamb�m funciona?

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.

Responder

Gostei + 0

12/05/2017

Dayan Barros

Ent�o se eu for utilizar no top ou bottom para alinhar na vertical, tamb�m funciona?

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!!!

Responder

Gostei + 0