Vertically centering a div inside another div
HtmlCssHtml Problem Overview
I want to center a div which is inside another div.
<div id="outerDiv">
<div id="innerDiv">
</div>
</div>
This is the CSS I am currently using.
#outerDiv {
width: 500px;
height: 500px;
position: relative;
}
#innerDiv {
width: 284px;
height: 290px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -147px;
margin-left: -144px;
}
As you can see, the approach I use now depends on the width and height of #innerDiv
. If the width/height changes, I will have to modify the margin-top
and margin-left
values. Is there any generic solution that I can use to center the #innerDiv
independently of its size?
I figured out that using margin: auto
can horizontally align the #innerDiv
to the middle. But what about vertical alignment?
Html Solutions
Solution 1 - Html
Vertical align middle works, but you will have to use table-cell
on your parent element and inline-block
on the child.
This solution is not going to work in IE6 & 7.
Yours is the safer way to go for those.
But since you tagged your question with CSS3 and HTML5 I was thinking that you don't mind using a modern solution.
The classic solution (table layout)
This was my original answer. It still works fine and is the solution with the widest support. Table-layout will impact your rendering performance so I would suggest that you use one of the more modern solutions.
Tested in:
- FF3.5+
- FF4+
- Safari 5+
- Chrome 11+
- IE9+
HTML
<div class="cn"><div class="inner">your content</div></div>
CSS
.cn {
display: table-cell;
width: 500px;
height: 500px;
vertical-align: middle;
text-align: center;
}
.inner {
display: inline-block;
width: 200px; height: 200px;
}
Modern solution (transform)
Since transforms are fairly well supported now there is an easier way to do it.
CSS
.cn {
position: relative;
width: 500px;
height: 500px;
}
.inner {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
width: 200px;
height: 200px;
}
♥ my favourite modern solution (flexbox)
I started to use flexbox more and more its also well supported now Its by far the easiest way.
CSS
.cn {
display: flex;
justify-content: center;
align-items: center;
}
More examples & possibilities: Compare all the methods on one pages
Solution 2 - Html
Another way of achieving this horizontal and vertical centering is:
.Absolute-Center {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
Solution 3 - Html
Another way is using Transform Translate
Outer Div must set its position
to relative
or fixed
, and the Inner Div must set its position
to absolute
, top
and left
to 50%
and apply a transform: translate(-50%, -50%)
.
div.cn {
position: relative;
width: 200px;
height: 200px;
background: gray;
text-align: center;
}
div.inner {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background: red;
}
<div class="cn">
<div class="inner">
test
</div>
</div>
Tested in:
- Opera 24.0 (minimum 12.1)
- Safari 5.1.7 (minimum 4 with -webkit- prefix)
- Firefox 31.0 (minimum 3.6 with -moz- prefix, from 16 without prefix)
- Chrome 36 (minimum 11 with -webkit- prefix, from 36 without prefix)
- IE 11, 10 (minimum 9 with -ms- prefix, from 10 without prefix)
- More browsers, Can I Use?
Solution 4 - Html
Vertical Align Anything with just 3 lines of CSS
HTML
<div class="parent-of-element">
<div class="element">
<p>Hello</p>
</div>
</div>
Simplest
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
CSS
.parent-of-element {
position: relative;
height: 500px;
/* or height: 73.61% */
/* or height: 35vh */
/* or height: ANY HEIGHT */
}
.element {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
According to shouldiprefix this are the only prefixes you need
You can also use % as the value for the 'height' property of .parent-of-element, as long as parent of element has height or some content that expands its vertical size.
Solution 5 - Html
Instead of tying myself in a knot with hard-to-write and hard-to-maintain CSS (that also needs careful cross-browser validation!) I find it far better to give up on CSS and use instead wonderfully simple HTML 1.0:
<table id="outerDiv" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="middle" id="innerDiv">
</td>
</tr>
</table>
This accomplishes everything the original poster wanted, and is robust and maintainable.
Solution 6 - Html
You can do it by simply adding css style mentioned below. This is supported by most of the browsers. You can check here for the browser support. All the best. For any query please comment
#outerDiv {
width: 500px;
height: 500px;
position:relative;
background:grey;
display:flex;
justify-content:center;
align-items:center;
}
#innerDiv {
background:cyan;
width: 284px;
height: 290px;
}
<div id="outerDiv">
<div id="innerDiv">
Inner Div
</div>
</div>
Solution 7 - Html
I personally prefer the trick of using a hidden pseudo element to span the full height of the outer container, and vertically aligning it with the other content. Chris Coyier has a nice article on the technique. http://css-tricks.com/centering-in-the-unknown/ The huge advantage of this is scalability. You don't have to know the height of the content or worry about it growing/shrinking. This solution scales :).
Here's a fiddle with all the CSS you'll need and a working example. http://jsfiddle.net/m5sLze0d/
.center:before {
content: ""; /* Adding Extra Space Above Element */
display: inline-block;
height: 100%;
margin-right: -0.3em;
vertical-align: middle;
}
.center_element {
display:inline-block;
float:none;
vertical-align:middle;
white-space:normal;
text-align:left;
}
Solution 8 - Html
Vertically centering div items inside another div
Just set the container to display:table
and then the inner items to display:table-cell
. Set a height
on the container, and then set vertical-align:middle
on the inner items. This has broad compatibility back as far as the days of IE9.
Just note that the vertical alignment will depend on the height of the parent container.
.cn
{
display:table;
height:80px;
background-color:#555;
}
.inner
{
display:table-cell;
vertical-align:middle;
color:#FFF;
padding-left:10px;
padding-right:10px;
}
<div class="cn">
<div class="inner">Item 1</div>
<div class="inner">Item 2</div>
</div>
Solution 9 - Html
If you still didn't understand after reading the marvellous answers given above.
Here are two simple examples of how you can achieve it. > Using display: table-cell
.wrapper {
display: table-cell;
vertical-align: middle;
text-align: center;
width: 400px;
height: 300px;
border: 1px solid #555;
}
.container {
display: inline-block;
text-align: left;
padding: 20px;
border: 1px solid #cd0000;
}
<div class="wrapper">
<div class="container">
Center align a div using "<strong>display: table-cell</strong>"
</div>
</div>
> Using flex-box (display: flex)
.wrapper {
display: flex;
justify-content: center;
width: 400px;
height: 300px;
border: 1px solid #555;
}
.container {
align-self: center;
padding: 20px;
border: 1px solid #cd0000;
}
<div class="wrapper">
<div class="container">
Centering a div using "<strong>display: flex</strong>"
</div>
</div>
Note: Check the browser compatibility of display: table-cell and flex before using the above mentioned implementations.
Solution 10 - Html
When your height
is not set (auto); you can give inner div some padding (top and bottom) to make it vertically center:
<div>
<div style="padding-top:20px;padding-bottom:20px">
<!--content-->
</div>
</div>
Solution 11 - Html
I have been using the following solution since over a year, it works with IE 7 and 8 as well.
<style>
.outer {
font-size: 0;
width: 400px;
height: 400px;
background: orange;
text-align: center;
display: inline-block;
}
.outer .emptyDiv {
height: 100%;
background: orange;
visibility: collapse;
}
.outer .inner {
padding: 10px;
background: red;
font: bold 12px Arial;
}
.verticalCenter {
display: inline-block;
*display: inline;
zoom: 1;
vertical-align: middle;
}
</style>
<div class="outer">
<div class="emptyDiv verticalCenter"></div>
<div class="inner verticalCenter">
<p>Line 1</p>
<p>Line 2</p>
</div>
</div>
Solution 12 - Html
This works for me. Width and hight of the outer div can be defined.
Here the code:
.outer {
position: relative;
text-align: center;
width: 100%;
height: 150px; // Any height is allowed, also in %.
background: gray;
}
.outer > div:first-child {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background: red;
}
<div class="outer">
<div class="inner">
Put here your text or div content!
</div>
</div>
Solution 13 - Html
Fiddle Link < http://jsfiddle.net/dGHFV/2515/>
Try this
#outerDiv{
width: 500px;
height: 500px;
position:relative;
border:1px solid red;
}
#innerDiv{
width: 284px;
height: 290px;
position:absolute;
top: 0px;
left:0px;
right:0px;
bottom:0px;
margin:auto;
border:1px solid green;
}
Solution 14 - Html
for innerdiv which do not specify it's height value,there is no pure css solution to make it vertically centered.a javascript solution could be get the innerdiv's offsetHeight,then calculate the style.marginTop.
Solution 15 - Html
You can do this with a simple javascript (jQuery) block.
CSS:
#outerDiv{
height:100%;
}
Javascript:
<script type="text/javascript">
$(document).ready(function () {
$("#innerDiv").css('top', ($(window).height() - $("#content").height()) / 2);
});
</script>
Solution 16 - Html
try to align inner element like this:
top: 0;
bottom: 0;
margin: auto;
display: table;
and of course:
position: absolute;
Solution 17 - Html
You can center the div vertically and horizontally in CSS using flex;
#outerDiv{
width: 500px;
height: 500px;
position:relative;
border:1px solid #000;
margin:0 auto;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
#innerDiv{
width: 284px;
height: 290px;
border:1px solid #eee;
}
And the second one is as following;
#outerDiv{
width: 500px;
height: 500px;
position:relative;
border:1px solid #000;
}
#innerDiv{
max-width: 300px;
height: 200px;
background-color: blue;
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
border:1px solid #000;
border-radius:4px;
}
And the resulting HTML:
<div id="outerDiv">
<div id="innerDiv"></div>
</div>
Solution 18 - Html
enter image description here 100% it works
.div1{
height: 300px;
background: red;
width: 100%;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;
align-items: center;
}
.div2{
background: green;
height: 100px;
width: 100%;
}
<div class="div1">
<div class="div2">
sdfd
</div>
</div>
Solution 19 - Html
This will work way back to IE6!
<!DOCTYPE html>
is required on IE6 too!
[ will force IE6 default strict mode as well ].
( of course, the box coloring is for demo purposes only )
#outer{
width: 180px;
height: 180px;
margin: auto;
text-align: center;
}
#inner{
text-align: center;
vertical-align: middle;
width: 100px;
height: 100px;
display: inline-block;
padding: .3em;
}
#center{
height: 100%; width:0px;
vertical-align: middle;
display: inline-block;
}
div {background: rgba(0,110,255,.7)}
<DIV id=outer>
<div id=center>
</div><!--Don't break this line!--><div id=inner>
The inner DIV
</div>
</DIV>
Solution 20 - Html
Vertically centering a div inside another div
#outerDiv{
width: 500px;
height: 500px;
position:relative;
background-color: lightgrey;
}
#innerDiv{
width: 284px;
height: 290px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%); /* IE 9 */
-webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */
background-color: grey;
}
<div id="outerDiv">
<div id="innerDiv"></div>
</div>
Solution 21 - Html
I would like to show another cross-browser way which can solve this question using CSS3 calc()
.
We can use the calc()
function to control the margin-top
property of the child div when it's positioned absolute relative to the parent div.
The main advantage using calc()
is that the parent element height can be changed at anytime and the child div will always be aligned to the middle.
The margin-top
calculation is made dynamically (by css and not by a script and it's a very big advantage).
Check out this LIVE DEMO
<!DOCTYPE html>
<html>
<head>
<style>
#parent{
background-color:blue;
width: 500px;
height: 500px;
position:relative;
}
#child{
background-color:red;
width: 284px;
height: 250px;
position:absolute;
/* the middle of the parent(50%) minus half of the child (125px) will always
center vertically the child inside the parent */
margin-top: -moz-calc(50% - 125px);
/* WebKit */
margin-top: -webkit-calc(50% - 125px);
/* Opera */
margin-top: -o-calc(50% - 125px);
/* Standard */
margin-top: calc(50% - 125px);
}
</style>
</head>
<body>
<div id="parent">
<div id="child">
</div>
</div>
</body>
</html>
Output:
Solution 22 - Html
text align-center on parent element, display inline-block on child element. This will center all most anything. I believe its call a "block float".
<div class="outer">
<div class="inner"> some content </div>
</div><!-- end outer -->
<style>
div.outer{
width: 100%;
text-align: center;
}
div.inner{
display: inline-block;
text-align: left
}
</style>
This is also a good alternative for float's, good luck!
Solution 23 - Html
To center align both vertically and horizontally:
#parentDiv{
display:table;
text-align:center;
}
#child {
display:table-cell;
vertical-align:middle;
}
Solution 24 - Html
I know that question was created year ago... Anyway thanks CSS3 you can easily vertically aligns div in div (example there http://jsfiddle.net/mcSfe/98/)
<div style="width: 100px; height: 100px">
<div>
Go to Hell!
</div>
</div>
div
{
display:-moz-box;
-moz-box-align:center;
}