Bulls Eye Centering with Flexbox

In a previous quick tip I showed you how to center elements with the transform attribute. Today we’ll try it with Flexbox. Please refer to MDN’s definition of Flexbox. Now let’s get started with basic centering…

I did say “Bulls Eye”, didn’t I?

.container
{
	display: -webkit-flex; /* Safari */
	display: flex; 
	width: 100%;
	height: 70vh;
	
	&__circle
	{
		display: -webkit-flex; /* Safari */
		display: flex; 
		background-color: black; 
		border-radius: 50%;
		width: 20vh; 
		height: 20vh;  
		margin: auto;
	}
	
	&__redband
	{
		display: -webkit-flex; 
		display: flex; 
		background-color: maroon; 
		border-radius: 50%; 
		margin: auto;
		width: 25vh; 
		height: 25vh; 
	}
	
	&__whiteband
	{
		display: -webkit-flex; 
		display: flex; 
		background-color: white; 
		border-radius: 50%; 
		margin: auto;
		width: 15vh; 
		height: 15vh; 	
	}
	
	&__center
	{
		background-color: black; 
		border-radius: 50%; 
		margin: auto;
		width: 5vh; 
		height: 5vh; 		
	}
}