Как сверстать календарь?

Question

[denism300]

Есть календарь, сделанный с помощью bootstrap.
Код примерно такой:

<div class="calendar-body" style="background: url(img.jpg) 50% 50%;">
	<div class="col-3">
		<p>текущая дата</p>
	</div>
	<div class="col-9">
		<div class="row">
			<div class="col-2">
				<p>1</p>
			</div>
			<div class="col-2">
				<p>2</p>
			</div>
			<div class="col-2">
				<p>3</p>
			</div>
			<div class="col-2">
				<p>4</p>
			</div>
			<div class="col-2">
				<p>5</p>
			</div>
			<div class="col-2">
				<p>6</p>
			</div>
			<div class="col-2">
				<p>7</p>
			</div>
		</div>
		<div class="row">
			...
		</div>
		...
	</div>
</div>

как это все сверстать, чтобы календарь всегда был в центре бекграунда на всех разрешениях экранов?
В общем, чтоб красиво было :)
медиа запросами как-то не очень получается.

Answer 1

[Sergey]

calendar-body {
  display: flex;
  align-items: center;
  justify-content: center;
}