How to center div vertically inside of absolutely positioned parent div

Question

I am trying to get blue container in the middle of pink one  however seems vertical-align  middle  doesn t do the job in that case    lt div style  display  block  position  absolute  left  50px  top  50px   gt       lt div style  text-align  left  position  absolute height  56px vertical-align  middle background-color  pink   gt           lt div style  background-color  lightblue   gt test lt  div gt       lt  div gt   lt  div gt    Result     Expectation     Please suggest how can I achieve that    Jsfiddle

User · Answer

For only vertical center  x000D   x000D       lt div style  text-align  left  position  relative height  56px background-color  pink   gt           lt div style  background-color  lightblue position absolute top 50      transform  translateY -50     gt test lt  div gt       lt  div gt  x000D   x000D   x000D   I always do like this  it s a very short and easy code to center both horizontally and vertically  x000D   x000D   center      position  absolute      top  50       left  50       transform  translate -50   -50      x000D   lt div class  center  gt Hello Centered World  lt  div gt  x000D   x000D   x000D

User · Answer

use this      Absolute-Center       margin  auto      position  absolute      top  0  left  0  bottom  0  right  0      refer this link  https   www smashingmagazine com 2013 08 absolute-horizontal-vertical-centering-css

User · Answer

You can do it by using display table  in parent div and display  table-cell  vertical-align  middle  in child div    x000D   x000D   lt div style  display table   gt  x000D         lt div style  text-align  left   height  56px   background-color  pink  display  table-cell  vertical-align  middle   gt  x000D             lt div style  background-color  lightblue    gt test lt  div gt  x000D         lt  div gt  x000D     lt  div gt  x000D   x000D   x000D

User · Answer

Here is simple way using Top object    eg  If absolute element size is 60px     absolute-element        position absolute       height 60px       top  calc 50  - 60px

User · Answer

Use flex blox in your absoutely positioned div to center its content   See example https   plnkr co edit wJIX2NpbNhO34X68ZyoY p preview   some-absolute-div         display  -webkit-box    display  -webkit-flex    display  -moz-box    display  -moz-flex    display  -ms-flexbox    display  flex     -webkit-box-pack  center    -ms-flex-pack  center    -webkit-justify-content  center    -moz-justify-content  center    justify-content  center     -webkit-box-align  center    -ms-flex-align  center    -webkit-align-items  center    -moz-align-items  center    align-items  center

User · Answer

You may use display table table-cell    x000D   x000D   a  x000D     position  absolute   x000D    left  50px   x000D    top  50px  x000D    display table  x000D    x000D   b  x000D    text-align  left   x000D    display table-cell  x000D    height  56px  x000D    vertical-align  middle  x000D    background-color  pink  x000D    x000D   c   x000D    background-color  lightblue  x000D    x000D   lt div class  a  gt  x000D     lt div  class  b  gt  x000D       lt div class  c   gt test lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Center vertically and horizontally    parent    height  100     position  absolute    width  100     top  0    left  0     c    position  absolute    top  50     left  0    right  0    transform  translateY -50

User · Answer

An additional simple solution  HTML    lt div id  d1  gt       lt div id  d2  gt          Text      lt  div gt   lt  div gt      CSS    d1      position absolute      top 100px left 100px      d2      border 1px solid black      height 50px  width 50px      display table-cell      vertical-align middle      text-align center

User · Answer

First of all note that vertical-align is only applicable to table cells and inline-level elements  There are couple of ways to achieve vertical alignments which may or may not meet your needs  However I ll show you two methods from my favorites  1  Using transform and top  x000D   x000D   valign       position  relative      top  50       transform  translateY -50           vendor prefixes omitted due to brevity      x000D   lt div style  position  absolute  left  50px  top  50px   gt       lt div style  text-align  left  position  absolute height  56px background-color  pink   gt           lt div class  valign  style  background-color  lightblue   gt test lt  div gt       lt  div gt   lt  div gt  x000D   x000D   x000D   The key point is that a percentage value on top is relative to the height of the containing block  While a percentage value on transforms is relative to the size of the box itself  the bounding box   If you experience font rendering issues  blurry font   the fix is to add perspective 1px  to the transform declaration so it becomes  transform  perspective 1px  translateY -50     It s worth noting that CSS transform is supported in IE9   2  Using inline-block  pseudo- elements In this method  we have two sibling inline-block elements which are aligned vertically at the middle by vertical-align  middle declaration  One of them has a height of 100  of its parent and the other is our desired element whose we wanted to align it at the middle   x000D   x000D   parent       text-align  left      position  absolute      height  56px      background-color  pink      white-space  nowrap      font-size  0     remove the gap between inline level elements        dummy-child   height  100       valign       font-size  16px     re-set the font-size        dummy-child   valign       display  inline-block      vertical-align  middle    x000D   lt div style  position  absolute  left  50px  top  50px   gt       lt div class  parent  gt           lt div class  dummy-child  gt  lt  div gt           lt div class  valign  style  background-color  lightblue   gt test lt  div gt       lt  div gt   lt  div gt  x000D   x000D   x000D   Finally  we should use one of the available methods to remove the gap between inline-level elements

[html] How to center div vertically inside of absolutely positioned parent div

Examples related to html

Examples related to css

Examples related to vertical-alignment

Examples related to absolute