I have a <div> element which contains text and I want to align the contents of this <div> vertically center.
Here is my <div> style:
#box {
height: 170px;
width: 270px;
background: #000;
font-size: 48px;
color: #FFF;
text-align: center;
}<div id="box">
Lorem ipsum dolor sit
</div>What is the best way to achieve this goal?
This question is related to
html
css
vertical-alignment
The answer is
.element{position: relative;top: 50%;transform: translateY(-50%);}
Add this small code in the CSS property of your element. It is awesome. Try it!
Even better idea for this. You can do like this too
body,_x000D_
html {_x000D_
height: 100%;_x000D_
}_x000D_
_x000D_
.parent {_x000D_
white-space: nowrap;_x000D_
height: 100%;_x000D_
text-align: center;_x000D_
}_x000D_
_x000D_
.parent:after {_x000D_
display: inline-block;_x000D_
vertical-align: middle;_x000D_
height: 100%;_x000D_
content: '';_x000D_
}_x000D_
_x000D_
.centered {_x000D_
display: inline-block;_x000D_
vertical-align: middle;_x000D_
white-space: normal;_x000D_
}<div class="parent">_x000D_
<div class="centered">_x000D_
<p>Lorem ipsum dolor sit amet.</p>_x000D_
</div>_x000D_
</div>Here is working code:
body{_x000D_
margin:0;_x000D_
}_x000D_
div {_x000D_
height: 80px;_x000D_
background: #171717;_x000D_
font-size: 24px;_x000D_
text-align: center;_x000D_
font-style: normal;_x000D_
color: #FFF;_x000D_
margin-top: 18px;_x000D_
margin-left: 4px;_x000D_
line-height: 80px;_x000D_
}<html xmlns="http://www.w3.org/1999/xhtml">_x000D_
<head>_x000D_
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />_x000D_
<title>Align text vertically center in div using CSS</title>_x000D_
</head>_x000D_
_x000D_
<body>_x000D_
<div>_x000D_
<span><a class="btn" href="http://ownanswers.com/"_x000D_
rel="dofollow">OwnAnswers.com</a>_x000D_
</span>_x000D_
For asking your questions, visit this site._x000D_
</div>_x000D_
</body>_x000D_
</html>Result
This works perfectly.
You have to use table style for the div and center align for the content.
You can easily do this by adding the following piece of CSS code:
display: table-cell;
vertical-align: middle;
That means your CSS finally looks like:
#box {_x000D_
height: 90px;_x000D_
width: 270px;_x000D_
background: #000;_x000D_
font-size: 48px;_x000D_
font-style: oblique;_x000D_
color: #FFF;_x000D_
text-align: center;_x000D_
margin-top: 20px;_x000D_
margin-left: 5px;_x000D_
display: table-cell;_x000D_
vertical-align: middle;_x000D_
}<div id="box">_x000D_
Some text_x000D_
</div>There is a tiny magic with CSS3 flexboxes:
/* Important */_x000D_
section {_x000D_
display: flex;_x000D_
display: -webkit-flex;_x000D_
}_x000D_
p {_x000D_
/* Key Part */_x000D_
margin: auto;_x000D_
}_x000D_
_x000D_
_x000D_
/* Unimportant, coloring and UI */_x000D_
section {_x000D_
height: 200px;_x000D_
width: 60%;_x000D_
margin: auto;_x000D_
border-radius: 20px;_x000D_
border: 3px solid orange;_x000D_
background-color: gold;_x000D_
}_x000D_
p {_x000D_
text-align: center;_x000D_
font-family: Cantarell, Calibri;_x000D_
font-size: 15px;_x000D_
background-color: yellow;_x000D_
border-radius: 20px;_x000D_
padding: 15px;_x000D_
}<section>_x000D_
<p>_x000D_
I'm a centered box!<br/>_x000D_
Flexboxes are great!_x000D_
</p>_x000D_
</section>Tip: Replace the line above marked as "Key Part" with one of these lines, if you want to center the text:
Only vertically:
margin: auto 0;Only horizontally:
margin: 0 auto;
As I noticed, this trick works with grids (i.e. display: grid), also.
This is easy and very short:
.block {_x000D_
display: table-row;_x000D_
vertical-align: middle;_x000D_
}_x000D_
_x000D_
.tile {_x000D_
display: table-cell;_x000D_
vertical-align: middle;_x000D_
text-align: center;_x000D_
width: 500px;_x000D_
height: 100px;_x000D_
}<div class="body">_x000D_
<span class="tile">_x000D_
Hello middle world! :)_x000D_
</span>_x000D_
</div>Set it within button instead of div if you don't care about its little visual 3D effect.
#box_x000D_
{_x000D_
height: 120px;_x000D_
width: 300px;_x000D_
background: #000;_x000D_
font-size: 48px;_x000D_
font-style: oblique;_x000D_
color: #FFF;_x000D_
}<button Id="box" disabled>_x000D_
Lorem ipsum dolor sit amet, consectetur adipiscing elit._x000D_
</button>Try the following code:
display: table-cell;
vertical-align: middle;
div {_x000D_
height: 80%;_x000D_
width: 100%;_x000D_
text-align: center;_x000D_
display: table-cell;_x000D_
vertical-align: middle;_x000D_
background: #4CAF50;_x000D_
color: #fff;_x000D_
font-size: 50px;_x000D_
font-style: italic;_x000D_
}<div>_x000D_
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s_x000D_
</div>You can use the positioning method in CSS:
HTML:
<div class="relativediv">
<p>
Make me vertical align as center
</p>
</div>
CSS:
.relativediv{position:relative;border:1px solid #ddd;height:300px;width:300px}
.relativediv p{position:absolute:top:50%;transfrom:translateY(-50%);}
Hope you use this method too.
You can use the following code snippet as the reference. It is working like a charm for me:
<!DOCTYPE html>_x000D_
<html lang="de">_x000D_
<head>_x000D_
<title>Vertically Center Text</title>_x000D_
<style>_x000D_
html, body {_x000D_
height: 100%;_x000D_
margin: 0;_x000D_
padding: 0;_x000D_
width: 100%;_x000D_
}_x000D_
body {_x000D_
display: table;_x000D_
}_x000D_
.centered-text {_x000D_
text-align: center;_x000D_
display: table-cell;_x000D_
vertical-align: middle;_x000D_
}_x000D_
</style>_x000D_
</head>_x000D_
<body style="background:#3cedd5">_x000D_
<div class="centered-text">_x000D_
<h1>Yes, it's my landing page</h1>_x000D_
<h2>Under construction, coming soon!!!</h2>_x000D_
</div>_x000D_
</body>_x000D_
</html>The output of the above code snippet is as follow:
Another way:
Don't set the height attribute of the div, but instead use padding: to achieve the effect. Similarly to line-height, it only works if you have one line of text. Although this way, if you have more content, the text will still be centered, but the div itself will be slightly larger.
So instead of going with:
div {
height: 120px;
line-height: 120px;
}
You can say:
div {
padding: 60px 0; // Maybe 60 minus font-size divided by two, if you want to be exact
}
This will set the top and bottom padding of the div to 60px, and the left and right padding to zero, making the div 120 pixels (plus the height of your font) high, and placing the text vertically centered in the div.
.text{
background: #ccc;
position: relative;
float: left;
text-align: center;
width: 400px;
line-height: 80px;
font-size: 24px;
color: #000;
float: left;
}
Flexible approach
div {_x000D_
width: 250px;_x000D_
min-height: 50px;_x000D_
line-height: 50px;_x000D_
text-align: center;_x000D_
border: 1px solid #123456;_x000D_
margin-bottom: 5px;_x000D_
}_x000D_
span {_x000D_
display: inline-block;_x000D_
vertical-align: middle;_x000D_
line-height: normal;_x000D_
}<div>_x000D_
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />_x000D_
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />_x000D_
Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>_x000D_
</div>_x000D_
<div>_x000D_
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>_x000D_
</div>_x000D_
<div>_x000D_
<span>Lorem ipsum dolor sit amet.</span>_x000D_
</div>_x000D_
<div>For a single line of text (or a single character) you can use this technique:
It can be used when #box has a non-fixed, relative height in %.
<div id="box"></div>
#box::before {
display: block;
content: "";
height: 50%;
}
#box::after {
vertical-align: top;
line-height: 0;
content: "TextContent";
}
See a live demo at JsBin (easier to edit CSS) or JsFiddle (easier to change height of result frame).
If you want to place inner text in HTML, not in CSS, then you need to wrap text content in additional inline element and edit #box::after to match it. (And, of course, content: property should be removed.)
For example,
<div id="box"><span>TextContent</span></div>.
In this case, #box::after should be replaced with #box span.
For Internet Explorer 8 support you must replace :: with :.
The following code will put the div in the middle of the screen regardless of screen size or div size:
.center-screen {_x000D_
display: flex;_x000D_
flex-direction: column;_x000D_
justify-content: center;_x000D_
align-items: center;_x000D_
text-align: center;_x000D_
min-height: 100vh;_x000D_
} <html>_x000D_
<head>_x000D_
</head>_x000D_
<body>_x000D_
<div class="center-screen">_x000D_
I'm in the center_x000D_
</div>_x000D_
</body>_x000D_
</html>See more details about flex here.
For all your vertical alignment needs!
Declare this Mixin:
@mixin vertical-align($position: relative) {
position: $position;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
Then include it in your element:
.element{
@include vertical-align();
}
For reference and to add a simpler answer:
Pure CSS:
.vertical-align {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
Or as a SASS/SCSS Mixin:
@mixin vertical-align {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
Use by:
.class-to-center {
@include vertical-align;
}
By Sebastian Ekström's blog post Vertical align anything with just 3 lines of CSS:
This method can cause elements to be blurry due to the element being placed on a “half pixel”. A solution for this is to set its parent element to preserve-3d. Like following:
.parent-element {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
We live in 2015+ and Flex Box is supported by every major modern browser.
It will be the way websites are made from here on out.
Learn it!
The simple and versatile way is (as Michielvoo's table approach):
[ctrv]{
display:table !important;
}
[ctrv] > *{ /* adressing direct discendents */
display: table-cell;
vertical-align: middle;
// text-align: center; /* optional */
}
Using this attribute (or a equivalent class) on a parent tag works even for many children to align:
<parent ctrv> <ch1/> <ch2/> </parent>
Here is another option using flexbox.
HTML
<div id="container">
<div class="child">
<span
>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae,
nemo.</span
>
</div>
</div>
CSS
#container {
display: flex;
}
.child {
margin: auto;
}
Result
Here is a great article about centering in css. check it out https://ishadeed.com/article/learn-css-centering/
The solution accepted as the answer is perfect to use line-height the same as the height of div, but this solution does not work perfectly when text is wrapped OR is in two lines.
Try this one if text is wrapped or is on multiple lines inside a div.
#box
{
display: table-cell;
vertical-align: middle;
}
For more reference, see:
I would just like to extend the answer from Michielvoo in order to release need for line-height and breathing of div height. It is basically just a simplified version like this:
div {_x000D_
width: 250px;_x000D_
/* height: 100px;_x000D_
line-height: 100px; */_x000D_
text-align: center;_x000D_
border: 1px solid #123456;_x000D_
background-color: #bbbbff;_x000D_
padding: 10px;_x000D_
margin: 10px;_x000D_
}_x000D_
_x000D_
span {_x000D_
display: inline-block;_x000D_
vertical-align: middle;_x000D_
line-height: normal;_x000D_
}<div>_x000D_
<span>All grown-ups were once children... but only few of them remember it</span>_x000D_
</div>_x000D_
_x000D_
<div>_x000D_
<span>And now here is my secret, a very simple secret: It is only with the heart that one can see rightly; what is essential is invisible to the eye.</span>_x000D_
</div>NOTE: commented out part of cssis needed for fixed-height of enclosing div.
<!DOCTYPE html>
<html>
<head>
<style>
.main{
height:450px;
background:#f8f8f8;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-box-align: center;
align-items: center;
justify-content: center;
width: 100%;
}
</style>
</head>
<body>
<div class="main">
<h1>Hello</h1>
</div>
</body>
</html>
I saw the previous answers, and they will work only for that width of screen (not responsive). For the responsive you have to use flex.
Example:
div { display:flex; align-items:center; }
I needed a row of clickable elephants, vertically centered, but without using a table to get around some Internet Explorer 9 weirdness.
I eventually found the nicest CSS (for my needs) and it's great with Firefox, Chrome, and Internet Explorer 11. Sadly Internet Explorer 9 is still laughing at me...
div {_x000D_
border: 1px dotted blue;_x000D_
display: inline;_x000D_
line-height: 100px;_x000D_
height: 100px;_x000D_
}_x000D_
_x000D_
span {_x000D_
border: 1px solid red;_x000D_
display: inline-block;_x000D_
line-height: normal;_x000D_
vertical-align: middle;_x000D_
}_x000D_
_x000D_
.out {_x000D_
border: 3px solid silver;_x000D_
display: inline-block;_x000D_
}<div class="out" onclick="alert(1)">_x000D_
<div> <span><img src="http://www.birdfolk.co.uk/littleredsolo.png"/></span> </div>_x000D_
<div> <span>A lovely clickable option.</span> </div>_x000D_
</div>_x000D_
_x000D_
<div class="out" onclick="alert(2)">_x000D_
<div> <span><img src="http://www.birdfolk.co.uk/bang2/Ship01.png"/></span> </div>_x000D_
<div> <span>Something charming to click on.</span> </div>_x000D_
</div>Obviously you don't need the borders, but they can help you see how it works.
Try this solution:
.EXTENDER {_x000D_
position: absolute;_x000D_
top: 0px;_x000D_
left: 0px;_x000D_
bottom: 0px;_x000D_
right: 0px;_x000D_
width: 100%;_x000D_
height: 100%;_x000D_
overflow-y: hidden;_x000D_
overflow-x: hidden;_x000D_
}_x000D_
_x000D_
.PADDER-CENTER {_x000D_
width: 100%;_x000D_
height: 100%;_x000D_
display: -webkit-box;_x000D_
display: -moz-box;_x000D_
display: -ms-flexbox;_x000D_
display: -webkit-flex;_x000D_
display: flex;_x000D_
-webkit-box-pack: center;_x000D_
-moz-box-pack: center;_x000D_
-ms-flex-pack: center;_x000D_
-webkit-justify-content: center;_x000D_
justify-content: center;_x000D_
-webkit-box-align: center;_x000D_
-moz-box-align: center;_x000D_
-ms-flex-align: center;_x000D_
-webkit-align-items: center;_x000D_
align-items: center;_x000D_
}<div class="EXTENDER">_x000D_
<div class="PADDER-CENTER">_x000D_
<div contentEditable="true">Edit this text...</div>_x000D_
</div>_x000D_
</div>Built using CSS+.
Another way (not mentioned here yet) is with Flexbox.
Just add the following code to the container element:
display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
Flexbox demo 1
.box {_x000D_
height: 150px;_x000D_
width: 400px;_x000D_
background: #000;_x000D_
font-size: 24px;_x000D_
font-style: oblique;_x000D_
color: #FFF;_x000D_
text-align: center;_x000D_
padding: 0 20px;_x000D_
margin: 20px;_x000D_
display: flex;_x000D_
justify-content: center;_x000D_
/* align horizontal */_x000D_
align-items: center;_x000D_
/* align vertical */_x000D_
}<div class="box">_x000D_
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh_x000D_
</div>Alternatively, instead of aligning the content via the container, flexbox can also center the a flex item with an auto margin when there is only one flex-item in the flex container (like the example given in the question above).
So to center the flex item both horizontally and vertically just set it with margin:auto
Flexbox Demo 2
.box {_x000D_
height: 150px;_x000D_
width: 400px;_x000D_
background: #000;_x000D_
font-size: 24px;_x000D_
font-style: oblique;_x000D_
color: #FFF;_x000D_
text-align: center;_x000D_
padding: 0 20px;_x000D_
margin: 20px;_x000D_
display: flex;_x000D_
}_x000D_
.box span {_x000D_
margin: auto;_x000D_
}<div class="box">_x000D_
<span>margin:auto on a flex item centers it both horizontally and vertically</span> _x000D_
</div>NB: All the above applies to centering items while laying them out in horizontal rows. This is also the default behavior, because by default the value for flex-direction is row. If, however flex-items need to be laid out in vertical columns, then flex-direction: column should be set on the container to set the main-axis as column and additionally the justify-content and align-items properties now work the other way around with justify-content: center centering vertically and align-items: center centering horizontally)
flex-direction: column demo
.box {_x000D_
height: 150px;_x000D_
width: 400px;_x000D_
background: #000;_x000D_
font-size: 18px;_x000D_
font-style: oblique;_x000D_
color: #FFF;_x000D_
display: flex;_x000D_
flex-direction: column;_x000D_
justify-content: center;_x000D_
/* vertically aligns items */_x000D_
align-items: center;_x000D_
/* horizontally aligns items */_x000D_
}_x000D_
p {_x000D_
margin: 5px;_x000D_
}<div class="box">_x000D_
<p>_x000D_
When flex-direction is column..._x000D_
</p>_x000D_
<p>_x000D_
"justify-content: center" - vertically aligns_x000D_
</p>_x000D_
<p>_x000D_
"align-items: center" - horizontally aligns_x000D_
</p>_x000D_
</div>A good place to start with Flexbox to see some of its features and get syntax for maximum browser support is flexyboxes
Also, browser support nowadays is very good: caniuse
For cross-browser compatibility for display: flex and align-items, you can use the following:
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
Newer browsers now support the CSS calc function. If you are targeting these browsers you may want to look into doing something like this:
<div style="position: relative; width: 400px; height: 400px; background-color: red">_x000D_
<span style="position: absolute; line-height: 40px; height: 80px; text-align: center; width: 300px; overflow: hidden; top: calc(50% - 40px); left: calc(50% - 150px);">_x000D_
Here are two lines that will be centered even if the parent div changes size._x000D_
</span>_x000D_
</div>The key is to use style = "top: calc(50% - [innerFixedHeightInPX/2]px); height: [innerFixedHeightInPX]px;" inside an absolute or relatively positioned parent div.
All credit goes to this link owner @Sebastian Ekström Link; please go through this. See it in action codepen. By reading the above article I also created a demo fiddle.
With just three lines of CSS (excluding vendor prefixes) we can do it with the help of a transform: translateY vertically centers whatever we want, even if we don’t know its height.
The CSS property transform is usually used for rotating and scaling elements, but with its translateY function we can now vertically align elements. Usually this must be done with absolute positioning or setting line-heights, but these require you to either know the height of the element or only works on single-line text, etc.
So, to do this we write:
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
That’s all you need. It is a similar technique to the absolute-position method, but with the upside that we don’t have to set any height on the element or position-property on the parent. It works straight out of the box, even in Internet Explorer 9!
To make it even more simple, we can write it as a mixin with its vendor prefixes.
A better, easier, responsive approach is to set margin-top in CSS to around 45%:
margin-top: 45%;
You might have to play with that number, but it will be in the center of the surrounding div.
I'm not sure anyone has gone the writing-mode route, but I think it solves the problem cleanly and has broad support:
.vertical {_x000D_
//border: 1px solid green;_x000D_
writing-mode: vertical-lr;_x000D_
text-align: center;_x000D_
height: 100%;_x000D_
width: 100%;_x000D_
}_x000D_
.horizontal {_x000D_
//border: 1px solid blue;_x000D_
display: inline-block;_x000D_
writing-mode: horizontal-tb;_x000D_
width: 100%;_x000D_
text-align: center;_x000D_
}_x000D_
.content {_x000D_
text-align: left;_x000D_
display: inline-block;_x000D_
border: 1px solid #e0e0e0;_x000D_
padding: .5em 1em;_x000D_
border-radius: 1em;_x000D_
}<div class="vertical">_x000D_
<div class="horizontal">_x000D_
<div class="content">_x000D_
I'm centered in the vertical and horizontal thing_x000D_
</div>_x000D_
</div>_x000D_
</div>This will, of course, work with any dimensions you need (besides 100% of the parent). If you uncomment the border lines, it'll be helpful to familiarize yourself.
JSFiddle demo for you to fiddle.
Caniuse support: 85.22% + 6.26% = 91.48% (even Internet Explorer is in!)
You can also use below properties.
display: flex;
align-content: center;
justify-content : center;
.box { _x000D_
width: 100%;_x000D_
background: #000;_x000D_
font-size: 48px;_x000D_
color: #FFF;_x000D_
text-align: center;_x000D_
}_x000D_
_x000D_
.height {_x000D_
line-height: 170px;_x000D_
height: 170px;_x000D_
}_x000D_
_x000D_
.transform { _x000D_
height: 170px;_x000D_
position: relative;_x000D_
}_x000D_
_x000D_
.transform p {_x000D_
margin: 0;_x000D_
position: absolute;_x000D_
top: 50%;_x000D_
left: 50%;_x000D_
-ms-transform: translate(-50%, -50%);_x000D_
transform: translate(-50%, -50%);_x000D_
}<h4>Using Height</h4>_x000D_
<div class="box height">_x000D_
Lorem ipsum dolor sit_x000D_
</div>_x000D_
_x000D_
<hr />_x000D_
_x000D_
<h4>Using Transform</h4>_x000D_
<div class="box transform">_x000D_
<p>Lorem ipsum dolor sit</p>_x000D_
</div>Try the transform property:
#box {_x000D_
height: 90px;_x000D_
width: 270px;_x000D_
position: absolute;_x000D_
top: 50%;_x000D_
left: 50%;_x000D_
transform: translate(-50%, -50%);_x000D_
} <div Id="box">_x000D_
Lorem ipsum dolor sit amet, consectetur adipiscing elit._x000D_
</div>Wherever you want vertically center style means you can try display:table-cell and vertical-align:middle.
Example:
#box_x000D_
{_x000D_
display: table-cell;_x000D_
vertical-align: middle;_x000D_
height: 90px;_x000D_
width: 270px;_x000D_
background: #000;_x000D_
font-size: 48px;_x000D_
font-style: oblique;_x000D_
color: #FFF;_x000D_
text-align: center;_x000D_
margin-top: 20px;_x000D_
margin-left: 5px;_x000D_
}<div Id="box">_x000D_
Lorem ipsum dolor sit amet, consectetur adipiscing elit._x000D_
</div>A very simple & most powerful solution to vertically align center:
.outer-div {_x000D_
height: 200px;_x000D_
width: 200px;_x000D_
text-align: center;_x000D_
border: 1px solid #000;_x000D_
}_x000D_
_x000D_
.inner {_x000D_
position: relative;_x000D_
top: 50%;_x000D_
transform: translateY(-50%);_x000D_
color: red;_x000D_
}<div class="outer-div">_x000D_
<span class="inner">No data available</span>_x000D_
</div>Absolute Positioning and Stretching
As with the method above this one begins by setting positioning on the parent and child elements as relative and absolute respectively. From there things differ.
In the code below I’ve once again used this method to center the child both horizontally and vertically, though you can use the method for vertical centering only.
HTML
<div id="parent">
<div id="child">Content here</div>
</div>
CSS
#parent {position: relative;}
#child {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 50%;
height: 30%;
margin: auto;
}
The idea with this method is to try to get the child element to stretch to all four edges by setting the top, bottom, right, and left vales to 0. Because our child element is smaller than our parent elements it can’t reach all four edges.
Setting auto as the margin on all four sides however causes opposite margins to be equal and displays our child div in the center of the parent div.
Unfortunately the above won’t work in Internet Explorer 7 and below, and like the previous method the content inside the child div can grow too large, causing it to be hidden.
Source: Stackoverflow.com