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:
WordPress Resources
![[ Wizard’s Collection: SQL Recipes for WordPress ]](/wp/wp-content/uploads/go/250x250-wizards-sql.png)
![[ SAC Pro: WordPress Chat Plugin ]](/wp/wp-content/uploads/go/250x250-sac-pro.jpg)
![[ Banhammer Pro: Hammer the Enemy ]](/wp/wp-content/uploads/go/250x250-banhammer.jpg)
![[ Blackhole Pro: Trap and Block Bad Bots ]](/wp/wp-content/uploads/go/250x250-blackhole-pro.jpg)
![[ BBQ Pro: Advanced WordPress Firewall ]](/wp/wp-content/uploads/go/250x250-bbq-pro.jpg)
![[ GA Pro: WordPress + Google Analytics ]](/wp/wp-content/uploads/go/250x250-ga-pro.jpg)