Как изменить центр элемента css?

Question

[takinglimits]

Например, есть красный квадрат 100x100px(прим 1). Когда делаю margin-left: 50%, квадрат смещается больше чем на 50% (прим 2), как изменить центр элемента, чтобы было как в примере 3?

Answer 1

[Виктор]

https://codepen.io/anon/pen/VdaGQP

Comments

[takinglimits]

спасибо

Answer 2

[iBird Rose]

transform: translateX(-50%);
https://jsfiddle.net/e71yrkht/

Answer 3

[Михаил Юматов]

Сделай с помощью flexbox
Родителю:

display: flex;
justify-content: center;

Или по колхозному:
margin-left: calc(50% - 50px);
50px – это половина ширины вашего элемента.

Answer 4

[Антон Плашкевич]

почитайте тык

Answer 5

[DENIS Kokorev]

margin: 0 auto !important;
Опоздал, Виктор уже написал.