CSS Centering Problem

HTML

<div class="cont">
  <div class="left">
    place holder
  </div>
  <div class="center">
    my very long long title goes here
  </div>
</div>

<div class="real-center">
      my very long long title goes here
</div>

CSS

.cont {
  display: flex;
  text-align: center;
  border: 1px solid black;
}
.cont > * {
  white-space: nowrap;
  padding: 2px 4px;
  background: lightgray;
}
.cont > .center {
  background: yellow;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cont .left,
.cont::after {
  content: '';
  flex: 1;
}

.real-center{
  width: 100%;
  padding: 2px 4px;
  text-align:center;
}