I tried to vertically centralize plain text inside a flex box element.

I decided to use property `display:table-cell` with `vertical-align: middle`. But it doesn't seem to work properly in flexbox elements.

How can I centralize it vertically, ideally without using a wrapper or positioning, and while still truncating long text with ellipses?

```css
.container {
  width: 400px;
  height: 400px;
  font-weight: 700;
  border: 1px solid #d9d9d9;
  display: flex;
  flex-direction: column;
}

.item {
  display: table-cell;
  vertical-align: middle;
  flex: 1 1;
  background-color: cyan;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item:nth-of-type(2n) {
  background-color: aliceblue;
}
```

```html
<div class="container">
  <div class="item">Hello, I'm very very long string! Hello, I'm very very long string!</div>
  <div class="item">Hello</div>
  <div class="item">Hello</div>
  <div class="item">Hello</div>
</div>
```

[View On CodePen](https://codepen.io/anon/pen/oGVdjG)