Element change location when rotaion property is assigned

When i assign a rotation property to an element it appears to move, rather than staying in the same place and give the element a rotation, with the center as centerpoint.

image attached.

code example:

<Text Value="&#xe910;" Font="icon" TextColor="Grey" FontSize="25" Alignment="VerticalCenter"> <Rotation Degrees="180"/> </Text>


Nevermind, i see now that when i change the element holding the fonticons alignment from verticalcenter to center, the centerpoint is in the middle.