WP-Mix

A fresh mix of code snippets and tutorials

Center div

Round-up of some common ways to center divs with CSS: horizontal center, vertical center, and both horizontal and vertical center. Nine techniques!

Horizontal Center

Here are three ways to center elements horizontally. Each method can be useful depending on context.

Method 1: center via margin auto

Center block-level elements by setting margin to auto:

div { margin: 0 auto; width: 200px; }

Note: the width of the element (e.g., <div>) is required for this to work.

Method 2: center via text-align

Center text by setting text-align to center:

div { text-align: center }

That will center any text, inline elements, or inline-block elements that are contained in the <div>. Works great for centering images, links, form elements, and so forth. No width values are required for this method to work.

Method 3: center via transform

Alternately, you can use CSS3 transform to center horizontally:

div { 
	position: relative; 
	left: 50%;
	-webkit-transform: translate(-50%, 0); 
	    -ms-transform: translate(-50%, 0); 
	        transform: translate(-50%, 0); 
	}

This works for any element, even if the width is unknown.

Vertical Center

Here are three ways to center elements vertically. Each method can be useful depending on context.

Method 1: center via table-cell

To center any element vertically, apply table-cell and vertical-align:

div { min-height: 100px; display: table-cell; vertical-align: middle; }

Note: the height of the centered element (e.g., <div>) is required for this to work.

Method 2: center via line-height

This method may be useful when centering a single line of text:

div { height: 100px; line-height: 100px; }

Note: the height of the centered element (e.g., <div>) is required for this to work.

Method 3: center via transform

This method uses CSS3 transform to center vertically:

div { 
	position: relative; 
	top: 50%;
	-webkit-transform: translate(0, -50%); 
	    -ms-transform: translate(0, -50%); 
	        transform: translate(0, -50%); 
	}

This works for any element, even if the height is unknown.

Horizontal and Vertical Center

Here are three ways to center elements horizontally and vertically. Each method can be useful depending on context.

Method 1: center via position and negative margins

Here we position the <div> with absolute, and then apply negative margins equal to half the width and half the height:

div { 
	width: 300px; 
	height: 200px; 
	position: absolute; 
	left: 50%; 
	top: 50%; 
	margin: -100px 0 0 -150px; 
	}

Note: both width and height are required for this method to work.

Method 2: center via table-cell

Here we use the following markup:

<body>
	<div>
		<p>Horizontal and Vertical Center</p>
	</div>
</body>

..and then apply the following CSS:

div { 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 100%; 
	position: absolute; 
	display: table; 
	}
p { 
	display: table-cell; 
	vertical-align: middle; 
	margin: 0 auto; 
	text-align: center; 
	}

This requires more code than other methods, but works even when the width and height are unknown.

Method 3: center via transform

Here we center any element using position and the CSS3 transform property:

div { 
	position: relative; 
	top: 50%; left: 50%;
	-webkit-transform: translate(-50%, -50%); 
	    -ms-transform: translate(-50%, -50%); 
	        transform: translate(-50%, -50%); 
	}

This currently is my preferred way to center elements of unknown width and height.

There are several other techniques available for centering elements with CSS, but they are older and more complicated than the methods described here. Feel free to dig ’em up and check ’em out.

★ Pro Tip:

Digging Into WordPressGA Pro

WordPress Resources

[ WordPress Themes In Depth ] [ Blackhole Pro: Trap and Block Bad Bots ] [ Banhammer Pro: Hammer the Enemy ] [ BBQ Pro: Advanced WordPress Firewall ] [ USP Pro - User Submitted Posts ] [ Wizard’s Collection: SQL Recipes for WordPress ]

Subscribe to WP-Mix

Project Demos

Popular Posts

Recent Posts

Random Posts

RSS Feed

Grab the RSS Feed ›

1411 readers
Feed Statistics
About the Author

Jeff Starr is a professional developer, designer, author, and publisher with over 15 years of experience. He writes books and tutorials, develops plugins, and runs his own business.

About the Site

WP-Mix is where I share code snippets, tricks, and tips. WP-Mix was launched in October 2012, and now features 414 posts. You can check out the latest post published on Aug 29, 2024. Learn more ›

Contact

A few ways to connect:

© 2012–2024 Monzilla Media ★ shapeSpace ★ Sitemap ★ Feed ★ Privacy ★ Made in the USA