Vertically centering a div inside another div

    |
  • Added:
  • |
  • In: Wordpress

I want to center a div which is added 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 values for 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 always irrespective of its size?

I figured out that using margin:auto can horizontally allign the innerDiv to the middle.But what about vertical allign middle?

This Question Has 18 Answeres | Orginal Question | user700284

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> 

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> 

https://jsfiddle.net/Mangesh1556/btn1mozd/4/

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; } 

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>

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.

Another way of achieving this horizontal and vertical centering is:

.Absolute-Center { margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } 

(Reference)

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; } 

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.

tl;dr

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.

Here is an example


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; } 

Demo


? 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; } 

Demo

More examples & possibilities: Compare all the methods on one pages

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> 

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; } 

try to align inner element like this:

top: 0; bottom: 0; margin: auto; display: table; 

and of course:

position: absolute; 

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> 

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.

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.

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!

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?

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> 

Search
I am...

Sajjad Hossain

I have five years of experience in web development sector. I love to do amazing projects and share my knowledge with all.

NEED HOSTING?
Are you searching for Good Quality hosting?
You can Try It!
Connect Social With PHPAns
Top