All examples

Layouts & positioning > Flexbox
Exercise: center the cat

Flexbox is great for controlling whitespace. Centering a div is basically whitespace control.

Exercise time!

With only one change in the CSS, make it so that:

Example code

							<style>
img {
	width: 100px;
	height: 100px;
}


.cat-holder {
  display: flex;
  width: 400px;
	height: 400px;
	background-color: darkslateblue;
}
</style>

<div class="cat-holder">
  <img 
	  src="../summer-cat.png" 
		alt="Smashing cat holding icecream 
		in one hand and a laptop in the other" />
</div>

Preview

Answer

Open the answer

This is how you could achieve it:

Example code

							<style>
img {
	width: 100px;
	height: 100px;
}


.cat-holder {
	display: flex;
	width: 400px;
	height: 400px;
	background-color: darkslateblue;
}
</style>

<div class="cat-holder">
	<img 
		src="../summer-cat.png" 
		alt="Smashing cat holding icecream 
		in one hand and a laptop in the other" />
</div>

Preview