Как расположить блок по центру без костылей (ссылка на codepen внутри)?

Question

[wqertAnna]

ссылка на кейс (codepen)

Я хочу расположить блок с текстом (.text) по центру относительно блока .box.
Сейчас блок с текстом (.text) располагается по центру относительно content-box блока родителя. Что разумеется логично, но меня интересует, как можно расположить блок по центру относительно border-box блока родителя.
При этом если текста будет больше, он не должен заходить на кнопку, просто блок .box увеличивает свою высоту.

Те решения, что мне приходят в голову очень костыльные.

Посоветуйте что-нибудь, желательно с flex.



сейчас текст располагается по центру голубого прямоугольника, а мне нужно, чтобы располагался по центру желтого

И сделать верхний паддинг такой же как нижний не вариант, он должен быть меньше

--------------------------------------------------------------------------
UPD:
Вот так нужно, только без костылей

Comments

[Lord_Dantes]

Дать родителю свойство display: flex; aligh-items: center, justify-content: space-beetwen;
Это сделает равномерный отступ между элементами как если задать каждому margin: auto;

[wqertAnna]

slave bb, Вы пробовали так делать?
Это ничего не меняет.

[wqertAnna]

Максим Ленский, думаю, у меня не получилось объяснить чего я хочу.


Вот такой эффект мне нужен
т.е. именно блок с текстом позиционируется по центру относительно блока родителя
Но на скрине это достигнуто тем, что я сделала нижний и верхний padding равными, а мне нужно, чтобы padding-top был пикселей 10

[wqertAnna]

Максим Ленский,

Мм, нет, не подходит.
Мне нужно, чтобы текст не заползал на кнопку.

[WapSter]

wqertAnna, задайте паддинг нижний

[wqertAnna]

Тимур Турсунбаев, если просто задать нижний паддинг, то текст не будет по центру
Решение нашла, там всё несколько сложнее

Answer 1

[wqertAnna]

Решение найдено
https://codepen.io/anon/pen/xopBZw


блок сверху светло-фиолетовый (фон добавила для наглядности, так разумеется он прозрачный) это :before
со стилями:

{  
  min-height: 20px;
    max-height: 80px;
    flex-grow: 8;
    width: 100%;
}

т.е. от текста до верхней и нижней границы блока .box (тот, что с розовым border) одинаковое расстояние (стрелки) вне зависимости от количества текста, если нет переполнения.
При переполнении верхний блок сжимается

Comments

[WapSter]

Отличный вариант, сохраню себе в гисты. Извиняюсь за комментарий немного не понял вопроса.