Подреждане на дивове като пирамида

Искам да подредя няколко дива като пирамида , но незнам точно как. Ето за какво говоря. За момента имам следното: . Кодът който съм написал за това чудо е следния: Имам един главен див с id - tournamentsWrapper и в него див повтарящ се за всеки кръг с class - rounds. Въпроса ми е как да центрирам вертикално , всички кръгове след първи и да стане нещо като пирамида. Тоест искам кръг 2 да слезне на половината на кръг 1 , кръг 3 да слезне на половината на кръг 2 и т.н.

Благодаря предварително за помощта!!!
Поздрави

Най-лесният и бърз начин е да ползваш flexbox. Разбира се има лек проблем с browser support-a. Поддържа се от:
IE10+
и всички модерни браузъри

http://jsbin.com/EVAPIPUG/1/

Ако ти трябва решение за по-стари версии на IE. Тогава просто rounds можеш да ги направиш inline-block елементи и да използваш vertical-align: middle.

http://jsbin.com/uYAVIMod/6/

Само, че трябва да внимаваш за широчината на #tournamentsWrapper да не става по-малка от сбора на трите .rounds

Много благодаря

А няма ли да стане с JS да вземеш височината на първата колона и височината на втората колона. От първата вадиш втората и полученото число разделяш на 2 и това число го слагаш като margin-top на втората колона и така респективно за всяка следваща + маргина от предишната.

Ако знаеш колко състезатели ще има в началото примерно

8-4-2-1 Според мен най-лесно ще ти бъде с абсолютни позиции