Как расположить контейнер inline-flex по центру?

Question

[akokin]

Друзья, не могу понять, как расположить сам контейнер по центру страницы?
При задании контейнеру свойства inline-flex он прижимается к левому краю. А нужно бы посередине.
Может, есть другое решение?
Проблема в том, что мне нужно обвести этот контейнер цветными границами, чтобы получился своего рода блок по центру страницы.
Спасибо.

Answer 1

[Froggyweb]

Обертке дать свойство text-align: center;
в данном случае флексбокс ведет себя как инлайн элемент

Answer 2

[shadobut]

margin: 0 auto ?

Comments

[akokin]

Не действует.

[shadobut]

akokin, закинь в codepen.

[akokin]

shadobut, https://codepen.io/akokin/pen/wmqGWz
Думаю, что простейшим вариантом может быть дисплей как флекс, а элементам задать границы кроме внутренней.
Вероятно, у контейнера нет такого свойства, как расположиться по центру.

[SagePtr]

На расположение inline-flex действуют те же правила, что и на любой другой строчный элемент. То есть, вложите его в элемент с text-align: center. Ну или сделайте его блочным (обычный flex вместо inline-flex)

[shadobut]

akokin, самое простое и классическое выравнивание:
position: relative;
left: 50%;
transform: translateX(-50%);
можно поместить во флекс контейнер c justify-content: center;

[akokin]

SagePtr, спасибо большое. Вложил в другой див и получилось как нужно.

[akokin]

shadobut, спасибо.