Отцентрировать один блок из трех относительно родителя

[alex_web64]

Здравствуйте.

Есть вот такой пример https://jsfiddle.net/5dnz61qu/ Мне нужно, чтобы центр зеленого блока всегда находился в центре родительского.

У меня два варианта, но они оба мне не нравятся:

1) Абсолютное позиционирование.

2) Задать синему блоку такую же ширину, как и в красного. В блоках динамический контент, поэтому хотелось бы, чтобы они могли занимать все свободное пространство, а с этим вариантом такого не получится.

Есть еще идеи?

[Vlad_P]

Попробуйте для боковых блоков обертку с flex-grow: 1

[AlexZaw]

2 часа назад, alex_web64 сказал:

У меня два варианта, но они оба мне не нравятся:

А чем не нравится позиционирование?

<div class="parent">
  <div class="wrap">
    <div class="child child-1">Lorem ipsum dolor</div>
  </div>
  <div class="wrap">
    <div class="child child-2">Lorem ipsum dolor sit amet, consectetur</div>
  </div>
  <div class="wrap">
    <div class="child child-3">Lorem</div>
  </div>
</div>
<div class="center">
  Центр родительского блока
</div>

/* Внешний вид */
body {
  background: #ccc;
}
.parent {
  border: 2px solid #000;
  position: relative;
}
.center {
  text-align: center;
  position: relative;
  padding-top: 20px;
}
.center::before {
  content: "";
  position: absolute;
  width: 2px;
  height: 20px;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: #f00;
}
.child {
  height: 100px;
  flex-shrink: 0;
  white-space: nowrap;
}
.child-1 {
  background: #f00;
}
.child-2 {
  background: #0f0;
  position: relative;
}
.child-2::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: #f00;
}
.child-3 {
  background: #00f;
}

/* Позиционирование */
.parent {
  display: flex;
  justify-content: space-between;
}
.wrap {
  display: flex;
  width: 33.33%;
}
.wrap:nth-child(2) {
  justify-content: center;
}
.wrap:last-child {
  justify-content: flex-end;
}