A menudo tenemos problemas al centrar verticalmente un elemento en una caja o junto a otros elementos adyacentes y, muy a mi pesar acab√°bamos haciendolo con Javascript o jQuery. Pues bien, el otro d√≠a le√≠ en zerosixthree la manera de hacerlo en un apocas l√≠neas de CSS. La √ļnica “pega” es que se hace con transform y, a parte que se tienen que poner los prefijos para que los navegadores m√°s comunes lo entiendan, internet explorer 8 no accepta esta propiedad (aunque dentro poco mataremos a IE8). Os dejo el c√≥digo para centrar verticalmente:

.elemento {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
}

Para hacerlo con Compass se podría hacer un mixin:

@mixin vertical-align {
	position: relative;
	top: 50%;
	@include transform(translateY(-50%));
}
 
.elemento{
	@include vertical-align;
}