почти как обычно: выровнять блок вертикально по центру родителя, высота блока зависит от контента, родитель должен реагировть на переполнение по Y (переполняет выравниваемый блок) увеличением высоты или появлением скролла. Можно использовать продвинутый (-webkit) css.
Проблема в том, что блок содержит детей с overflow:hidden; + white-space:nowrap; + text-overflow:ellipsis; из-за чего стандартные способы ломаются:
1. display:table-cell; + vertical-align:middle;
http://jsfiddle.net/7Ewfx/7/
не срабатывает overflow:hidden; .
2. display:flex; + align-items:center;
http://jsfiddle.net/7Ewfx/8/
не срабатывает text-overflow:ellipsis; и блок с текстом смещается влево.
3. display:box; + box-align:center;
http://jsfiddle.net/7Ewfx/9/
не срабатывает text-overflow:ellipsis; и display:box; вроде как устарел.
Должно получиться вот так:
http://jsfiddle.net/7Ewfx/10/ , но чтобы зеленый блок был в центре.
Кто-нибудь знает как это сделать?