Как отцентрировать центральный блок?

Question

[daima]

Сборка

<div class="wrap">
<div class="left">left</div>
<div class="center">center</div>
<div>right</div>
</div>

.wrap {
  display: inline-flex;
  border-color: blue;
  justify-content: space-between;
  min-width: 300px;
  position: relative;
}
.wrap:before {
  content:"";
  position: absolute;
  left: 50%;
  background: pink;
  height: 100%;
  z-index: -1;
  width: 50%;
}

.left {width: 100px;}

.center {
  align-items: center;
  padding: 0 20px;
}

Как сделать, чтобы средний блок отцентрировался по горизонтали?

Answer 1

[BigSmoke]

Чтобы разместить .center ровно в центре .wrap задайте .center такие стили:

.center {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
}

upd.

.left {width: 100px;}

.right {
  width: 50px;
  margin-left: 50px;
}

.center {
  align-items: center;
  padding: 0 20px;
  margin: 0 20px;
}

Comments

[daima]

Поменял условия, теперь display: inline-flex; min-width: 300px; Если в среднем блоке много текста он налезет на соседей. Абсолютное позиционирование здесь абсолютно не применимо

[BigSmoke]

Для изначальных условий решение с аблосютным позиционированием подходило, а с новыми условиями и с неизвестным количеством текста в центральном блоке яхз как это сделать.

[its_me_mamoru]

в среднем блоке много текста он налезет на соседей.

В таком случае нужно задать максимальную ширину.

[BigSmoke]

Дополнил ответ. Вот так можно сделать с разными размерами боковых блоков. Но размеры правому блоку все же придется задать.

[daima]

BigSmoke, правого блока плавающая длина, потому и класса у него нет.

Answer 2

[its_me_mamoru]

Чтобы блок .center стоял посередине, то надо, чтобы блоки .left и right имели одинаковую ширину.

Comments

[daima]

нереализуамо. Понимаешь почему?

Answer 3

[Алекс]

.center {
position: relative;
left: 50%;
margin-left: -300px;
}