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 WordPress