Как сделать точкой разметки центр div?

Question

[Ingernirated]

Такой вопрос, всегда div, в нашем случае прямоугольный, выравнивается по левому верхнему углу, как сделать так, чтобы его центр разметки был по середине блока?
Проблема в том, что при движения дива слева на право, идет переход блока со стороны, как и надо, а с права на лево, он движется уже не справа, а как бы из-за центра с совсем небольшим уколом направо, хоть параметры и симметричны.

.cRed {
	height:250px;
	width:400px;
	top:50%;
	margin-top:-125px;
	left:50%;
	margin-left:-200px;
	z-index:5;
}
.lRed {
	height:120px;
	width:200px;
	top:30%;
	left:10%;
	z-index:2;
}
.rRed {
	height:120px;
	width:200px;
	top:30%;
	right:10%;
	z-index:2;
}

Answer 1

[Евгений]

transform: translate(-50%, -50%);
margin: 0;

Answer 2

[iBird Rose]

transform: translateX(-50%);

Comments

[Ingernirated]

хрень какая-то получилась

[iBird Rose]

Ingernirated: ну если ты свои отрицательные марджины уберешь типа этого margin-left:-200px; блок будет считаться по середине

[iBird Rose]

Ingernirated: если хочешь чтобы и по Y - пишешь transform: translateX(-50%) translateY(-50%);

[Ingernirated]

iBird Rose: я тебя понял, убирал, ставил вместо них translateX(-50%) (п.с. норм вещь, я оценил), но вместе translateX и translateY не работают, только одно, что будет ниже.
Но дело даже не в этом, анимация блоков справа осталась такой же убогой и они не переходят красиво справой стороны к центру, а так же почти из центра сразу вперед.

[iBird Rose]

Ingernirated: я ж тебе в комменте выше написал. если хочешь использовать несколько видов трансформации - их нужно писать через пробел transform: translateX(-50%) translateY(-50%);

[Ingernirated]

iBird Rose: всё ровно это выравнивание по центру, а не в центре точка к которой остальные должны стремиться.
Хотелось бы, чтобы дивы друг к другу перемещались не беря за точку разметки верхний угол, а центр, чтобы движения с левой и правой стороны были синхронные, а не слева как надо, а справа дичь.