CSU Ram's Head

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:

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.


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


header {
	display: flex;			

#logo {
	width: 40%;

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