Centering Examples

Centering a block element horizontally in a container:

A block element to be centered inside whatever contains it should have the following CSS declarations:

					
margin-right: auto;
margin-left: auto;						
					
				

If an element is inline by default (e.g., an image), it can be made block with the following CSS declaration:

					
display: block
					
				

Centering text vertically in a container with display: flex:

Radio City

The content on the right side is vertically centered. Use the HTML and CSS code below to set up a container for vertical centering, Change element, ID or class as necessary, and adjust color, padding, etc.

HTML

					
<header>
	<div id = "logo"><img src="/course/examples/images/big-star.png"></div>
	<nav><p>Radio City</p></nav>
</header>	
						
						
				

CSS

					
header {
	display: flex;			
}

#logo {
	width: 40%;
}

nav {			
	width: 60%;
	background: #ccc;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}