lets say you have a box within another box, like so:

now in the olden days of web development, to get this another-box to align in the center i would have just added margin:0 auto; which fixes the center align but what about the top, you can add a % top margin and then minus it by half the div height. Anyway now this is much simpler with flex

we can just add the following to the wrapping box

display: flex;
align-items: center;
justify-content: center;

.flexed {
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 1s;		
}
.wide-box {
	width:800px;
	transition: all 0.5s;
}
.rounded-box {
	border-radius: 30px;
}

and now it should be centered!

/yay

which is good, if we are resizing the elements it should still stay in the center.

setInterval(function(){ $("#flexanimated").toggleClass("wide-box"); }, 3000);

Mmm.. animated flex box sand witch

Ah yeah i should probably add the code for that as well, just a toggle class on setInterval