Каким образом сейчас позиционируют элементы по вертикали?
В данном случае очень удобно будет позиционировать через флексбоксы, но надо повернуть главную ось.
1) Задаём родителю, в данном случае диву display: flex;
2) Поворачиваем главную ось с помощью flex-direction: column;
3) Задаем равномерное выравнивание контента justify-content: space-around либо justify-content: space-around;
  space-around  делает отступы сверху и с низу, а space-between прижимает крайние элементы к краям родителя
4) Так как мы повернули главную ось, то можно задать горизонтальную центровку через align-items: center;
Гототово :)
Пример - https://codepen.io/you_web/pen/JveOQM
Это реализация хороша тем, что сколько бы элементов в родительский флекс-контейнер вы не внесли, они автоматически будут выравниваться
Лично я склоняюсь к 2-м способам:
1. Односторонние margin
https://csswizardry.com/2012/06/single-direction-m...
2.Использование преимущественно padding по принципу лего. 
Почитать можно здесь или здесь.