Vertically centering a div inside another div

Question

I want to center a div which is added inside another div   lt div id  quot outerDiv quot  gt       lt div id  quot innerDiv quot  gt       lt  div gt   lt  div gt   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 independently of its size  I figured out that using margin auto can horizontally align the innerDiv to the middle  But what about vertical align middle

User · Answer

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>

User · Answer

Vertically centering a div inside another div   x000D   x000D   outerDiv  x000D    width  500px  x000D    height  500px  x000D    position relative  x000D     x000D    background-color  lightgrey    x000D    x000D   x000D   innerDiv  x000D    width  284px  x000D    height  290px  x000D     x000D    position  absolute  x000D    top  50   x000D    left  50   x000D    transform  translate -50   -50    x000D    -ms-transform  translate -50   -50       IE 9    x000D    -webkit-transform  translate -50   -50       Chrome  Safari  Opera     x000D     x000D    background-color  grey  x000D    x000D   lt div id  outerDiv  gt  x000D     lt div id  innerDiv  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

To center align both vertically and horizontally    parentDiv      display table      text-align center      child        display table-cell       vertical-align middle

User · Answer

This works for me  Width and hight of the outer div can be defined   Here the code    x000D   x000D   outer   x000D    position  relative  x000D    text-align  center  x000D    width  100   x000D    height  150px     Any height is allowed  also in    x000D    background  gray  x000D    x000D   x000D   outer  gt  div first-child   x000D    position  absolute  x000D    top  50   x000D    left  50   x000D    width  100   x000D    -webkit-transform  translate -50   -50    x000D    -ms-transform  translate -50   -50    x000D    transform  translate -50   -50    x000D    background  red  x000D    x000D   lt div class  outer  gt  x000D     lt div class  inner  gt  x000D      Put here your text or div content  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

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    x000D   x000D   cn x000D    x000D  display table  x000D  height 80px  x000D  background-color  555  x000D    x000D   x000D   inner x000D    x000D  display table-cell  x000D  vertical-align middle  x000D  color  FFF  x000D  padding-left 10px  x000D  padding-right 10px  x000D    x000D   lt div class  cn  gt  x000D     lt div class  inner  gt Item 1 lt  div gt  x000D     lt div class  inner  gt Item 2 lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

try to align inner element like this   top  0  bottom  0  margin  auto  display  table    and of course   position  absolute

User · Answer

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  amp  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   lt div class  cn  gt  lt div class  inner  gt your content lt  div gt  lt  div gt    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  amp  possibilities  Compare all the methods on one pages

User · Answer

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

User · Answer

This will work way back to IE6   lt  DOCTYPE html gt  is required on IE6 too    will force IE6 default strict mode as well      of course  the box coloring is for demo purposes only    x000D   x000D   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   x000D   lt DIV id outer gt   lt div id center gt   lt  div gt  lt  --Don t break this line -- gt  lt div id inner gt  The inner DIV  lt  div gt   lt  DIV gt  x000D   x000D   x000D

User · Answer

When your height is not set  auto   you can give inner div some padding  top and bottom  to make it vertically center    lt div gt       lt div style  padding-top 20px padding-bottom 20px  gt       lt  --content-- gt       lt  div gt   lt  div gt

User · Answer

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     lt div style  width  100px  height  100px  gt   lt div gt  Go to Hell   lt  div gt   lt  div gt   div   display -moz-box  -moz-box-align center

User · Answer

I have been using the following solution since over a year  it works with IE 7 and 8 as well    lt style gt   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     lt  style gt    lt div class  outer  gt       lt div class  emptyDiv verticalCenter  gt  lt  div gt       lt div class  inner verticalCenter  gt           lt p gt Line 1 lt  p gt           lt p gt Line 2 lt  p gt       lt  div gt   lt  div gt

User · Answer

Vertical Align Anything with just 3 lines of CSS  HTML   lt div class  parent-of-element  gt        lt div class  element  gt           lt p gt Hello lt  p gt       lt  div gt    lt  div gt    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

User · Answer

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    lt table id  outerDiv  cellpadding  0  cellspacing  0  border  0  gt       lt tr gt           lt td valign  middle  id  innerDiv  gt           lt  td gt       lt  tr gt   lt  table gt    This accomplishes everything the original poster wanted  and is robust and maintainable

User · Answer

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    x000D   x000D   wrapper   x000D    display  table-cell  x000D    vertical-align  middle  x000D    text-align  center  x000D    width  400px  x000D    height  300px  x000D    border  1px solid  555  x000D    x000D   x000D   container   x000D    display  inline-block  x000D    text-align  left  x000D    padding  20px  x000D    border  1px solid  cd0000  x000D    x000D   lt div class  wrapper  gt  x000D     lt div class  container  gt  x000D      Center align a div using   lt strong gt display  table-cell lt  strong gt   x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D       Using flex-box  display  flex     x000D   x000D   wrapper   x000D    display  flex  x000D    justify-content  center  x000D    width  400px  x000D    height  300px  x000D    border  1px solid  555  x000D    x000D   x000D   container   x000D    align-self  center  x000D    padding  20px  x000D    border  1px solid  cd0000  x000D    x000D   lt div class  wrapper  gt  x000D       lt div class  container  gt  x000D          Centering a div using   lt strong gt display  flex lt  strong gt   x000D       lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Note  Check the browser compatibility of display  table-cell and flex before using the above mentioned implementations

User · Answer

x000D   x000D   outerDiv  x000D          width  500px  x000D          height  500px  x000D          position relative  x000D          background grey  x000D          display flex  x000D          justify-content center  x000D          align-items center  x000D        x000D   x000D       innerDiv  x000D      background cyan  x000D          width  284px  x000D          height  290px  x000D   x000D           x000D        x000D   lt div id  outerDiv  gt  x000D   lt div id  innerDiv  gt Inner Div x000D   lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    you can do it by simply adding css style mentioned above  All the best  For any query please comment

User · Answer

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   lt  DOCTYPE html gt   lt html gt     lt head gt       lt style gt         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                lt  style gt     lt  head gt     lt body gt       lt div id  parent  gt         lt div id  child  gt         lt  div gt       lt  div gt     lt  body gt   lt  html gt    Output

User · Answer

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      x000D   x000D  div cn   x000D      position  relative  x000D      width  200px  x000D      height  200px  x000D      background  gray  x000D      text-align  center  x000D    x000D   x000D  div inner   x000D      position  absolute  x000D      top  50   x000D      left  50   x000D      width  100px  x000D      height  100px  x000D      -webkit-transform  translate -50   -50      x000D      transform  translate -50   -50       x000D      background  red  x000D     x000D    x000D   lt div class  cn  gt  x000D       lt div class  inner  gt  x000D          test x000D       lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    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

User · Answer

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     lt div class  outer  gt    lt div class  inner  gt  some content  lt  div gt   lt  div gt  lt  -- end outer -- gt    lt style gt  div outer   width  100    text-align  center    div inner   display  inline-block   text-align  left    lt  style gt    This is also a good alternative for float s  good luck

User · Answer

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           lt div class  div1  gt         lt div class  div2  gt        sdfd        lt  div gt       lt  div gt    https   jsfiddle net Mangesh1556 btn1mozd 4

User · Answer

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

User · Answer

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

User · Answer

Fiddle Link  lt   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

User · Answer

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        lt div id  outerDiv  gt           lt div id  innerDiv  gt  lt  div gt       lt  div gt

[html] Vertically centering a div inside another div

Examples related to html

Examples related to css