Владислав

Ну вопрос не совсем полный: хотелось бы услышать чем вы пользуетесь на проекте, стек технологий. От этого уже отталкиваться. В сети полным полно boilerplate'ов на все случаи жизни. Смотрите доки по конкретному boilerplate'у, на чем он базируется, потом гуглите доки по той системе сборки, на которой базируется конкретный boilerplate. Вырезаете ненужное, подпиливаете напильничком и вуаля: готовая экосистема сборки на проекте. Так что на мой взгляд вам нужно начать с описания проблем, которые должна решать конкретно ваша система, каким фреймворком пользуетесь (и пользуетесь ли?), нужен вам сборщик js или у вас голый html + css. Ирония - это замечательно, но конкретика все-таки бесценна.

На самом деле вариантов масса. Но есть нюансы: какие браузеры должны поддерживаться? какие девайсы поддерживать? и какое именно центрирование по вертикали или по горизонтали (на картинке есть и то и другое)?

Если поддерживать только последние браузеры, то логично было бы воспользоваться методом, предложенным Филиппом - флексы. (если не хочется долго вникать, можно посмотреть здесь, как это дело работает - santyagass.github.io/FlexWork/)