Every new developer inevitably finds that centering a div isn’t as obvious as you’d expect. Centering what’s inside a div is easy enough by giving the text-align property a value of center, but then things tend to get a bit sticky. When you get to centering a div vertically, you can end up in a world of CSS hurt.The aim of this article is to show how, with a few CSS tricks, any div can be centered; horizontally, vertically or both. And within the page or a div.
Centering a div in a page, basic
This method works with just about every browser, ever.
.center-div
{
margin: 0 auto;
width: 100px;
}
The value auto in the margin property sets the left and right margins to the available space within the page. The thing to remember is your centered div must have a width property.
Centering a div within a div, old-school
This method works with just about every browser.
<div class="outer-div">
<div class="inner-div">
</div>
</div>
.outer-div
{
padding: 30px;
}
.inner-div
{
margin: 0 auto;
width: 100px;
}
The margin auto trick strikes again. The outer div can be disorderly, but the inner div must have a width property.
Centering a div within a div with inline-block
With this method the inner div doesn’t require a set width. It works with all reasonably modern browsers, including IE8.
<div class="outer-div">
<div class="inner-div">
</div>
</div>
.outer-div
{
padding: 30px;
text-align: center;
}
.inner-div
{
display: inline-block;
padding: 50px;
}
The text-align property only works on inline elements. The inline-block value displays the inner div as an inline element as well as a block, so the text-align property in the outer div centers the inner div.
Centering a div within a div, horizontally and vertically
This uses the margin auto trick to center a div both horizontally and vertically. It works with all modern browsers.
<div class="outer-div">
<div class="inner-div">
</div>
</div>
.outer-div
{
padding: 30px;
}
.inner-div
{
margin: auto;
width: 100px;
height: 100px;
}
The inner div must have a width and height property. This doesn’t work if the outer div has a fixed height.
Centering a div at the bottom of a page
This uses margin auto and an absolute-positioned outer div. It works with all modern browsers.
<div class="outer-div">
<div class="inner-div">
</div>
</div>
.outer-div
{
position: absolute;
bottom: 30px;
width: 100%;
}
.inner-div
{
margin: 0 auto;
width: 100px;
height: 100px;
background-color: #ccc;
}
The inner div must have a width property. The gap from the very bottom of the page is set in the outer div’s bottom property. You can also center a div at the top of a page, replacing the bottom property with top.
Centering a div in a page, horizontally and vertically
This uses margin auto again and an absolute-positioned outer div. It works with all modern browsers.
.center-div
{
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100px;
height: 100px;
}
The div must have a width and height property.
Centering a div in a page, responsive
The width of the div is responsive, in that it responds to the size of the viewport. It works with just about every browser.
.center-div
{
margin: 0 auto;
max-width: 700px;
}
Your centered div must have a max-width property.
Centering a div within a div, inner div responsive
The inner div is responsive. Works with almost every browser.
<div class="outer-div">
<div class="inner-div">
</div>
</div>
.outer-div
{
padding: 30px;
}
.inner-div
{
margin: 0 auto;
max-width: 700px;
}
The inner div must have a max-width property.
Centering two responsive divs, side by side
Two divs side by side, and both responsive. Works with every modern browser.
<div class="container">
<div class="left-div"></div>
<div class="right-div"></div>
</div>
.container
{
text-align: center;
}
.left-div
{
display: inline-block;
max-width: 300px;
vertical-align: top;
}
.right-div
{
display: inline-block;
max-width: 150px;
}
screen and (max-width: 600px)
{
.left-div, .right-div
{
lef max-width: 100%;
}
}
Simply a couple of inline-block elements within a centered container. This also uses CSS media queries; when the screen size is less than 600 pixels, the max-width property of both left and right divs is set to 100%.
Flexbox, div centered
This centers a div both horizontally and vertically using Flexbox. The CSS3 Flexible Box Layout Module, aka Flexbox, aims to provide a CSS box model for user interface design. There’s plenty of Flexbox tutorials out there, and we’ve also played around.
Flexbox is supported by Chrome 38+, IE11 and Microsoft Edge, Firefox 38+, Safari 9+, Opera 30+, iOS Safari 9+ and Android Browser 40+.
<div class="container">
<div class="item"></div>
<div>
.container
{
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.item
{
background-color: #f3f2ef;
border-radius: 3px;
width: 200px;
height: 100px;
}
The height property in the container can be anything, as long as it’s larger than the centered div.
Easy.