Андрей Прозоров

1)
флексбокс c выравниванием контента
2)
height: 100px;
line-heigth:100px;
vertical-align: middle;

первый способ менее кроссбраузерный. второй работает везде но вы привязаны к пикселям (высота должна быть чекто задана )

" при изменении какого-то цвета элемента или убирании background меняется у обоих" - переопределять свойства через классу бустрап по меньшей мере не корректно. навесьте свои классы и делайте с ними что хотите