How to center the central block?

Question

HTML

Assembly

<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;
}

how to make middle block centered horizontally

Answer 1

To place the .center exactly in the center of the .wrap style the .center like this:

.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;
}

Answer 2

For the .center block to be in the middle, the .left and right blocks must have the same width.

Answer 3

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