vertical align middle in div

Question

I want to keep the height of  abc div at 50px and text to align vertically in the middle of the div    x000D   x000D  body  x000D    padding  0  x000D    margin  0  x000D    margin  0px auto  x000D    x000D   x000D   main  x000D    position  relative  x000D    background-color blue  x000D    width 500px  x000D    height 500px  x000D    x000D   x000D   abc  x000D    font Verdana  Geneva  sans-serif  x000D    font-size 18px  x000D    text-align left  x000D    background-color  0F0  x000D    height 50px  x000D    vertical-align middle  x000D    x000D   lt div id  main  gt  x000D    lt div id  abc  gt  x000D       asdfasdfafasdfasdf x000D    lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

x000D   x000D   div   x000D      height 200px  x000D      text-align  center  x000D      padding  2px  x000D      border  1px solid  000  x000D      background-color  green  x000D    x000D   x000D   text-align-center   x000D      display  flex  x000D      align-items  center  x000D      justify-content  center  x000D    x000D   lt div class  text-align-center  gt  Align center lt  div gt  x000D   x000D   x000D

User · Answer

You can use line-height  50px   you won t need vertical-align  middle  there   Demo    The above will fail if you ve multiple lines  so in that case you can wrap your text using span and than use display  table-cell  and display  table  along with vertical-align  middle   also don t forget to use width  100   for  abc  Demo   abc    font Verdana  Geneva  sans-serif    font-size 18px    text-align left    background-color  0F0    height 50px    display  table    width  100       abc span     vertical-align middle    display  table-cell        Another solution I can think of here is to use transform property with translateY   where Y obviously stands for Y Axis  It s pretty straight forward    All you need to do is set the elements position to absolute and later position 50  from the top and translate from it s axis with negative -50   div     height  100px    width  100px    background-color  tomato    position  relative     p     position  absolute    top  50     transform  translateY -50        Demo  Note that this won t be supported on older browsers  for example IE8  but you can make IE9 and other older browser versions of Chrome and Firefox by using -ms  -moz and -webkit prefixes respectively   For more information on transform  you can refer here

User · Answer

It s simple  give the parent div this   display  table    and give the child div s  this   display  table-cell  vertical-align  middle    That s it    x000D   x000D   parent  x000D      display  table  x000D    x000D   child  x000D      display  table-cell  x000D      vertical-align  middle  x000D      padding-left  20px  x000D    x000D   lt div class  parent  gt  x000D       lt div class  child  gt  x000D          Test x000D       lt  div gt  x000D       lt div class  child  gt  x000D          Test Test Test  lt br  gt  Test Test Test x000D       lt  div gt  x000D       lt div class  child  gt  x000D          Test Test Test  lt br  gt  Test Test Test  lt br  gt  Test Test Test x000D       lt  div gt  x000D   lt div gt  x000D   x000D   x000D

User · Answer

I found this solution by Sebastian Ekstr  m  It s quick  dirty  and works really well  Even if you don t know the parent s height    element     position  relative    top  50     -webkit-transform  translateY -50      -ms-transform  translateY -50      transform  translateY -50        Read the full article here

User · Answer

x000D   x000D   container      height  200px    position  relative    border  3px solid green       center     margin  0    position  absolute    top  50     left  50     -ms-transform  translate -50   -50      transform  translate -50   -50      x000D   lt h2 gt Centering Div inside Div  horizontally and vertically without table lt  h2 gt   lt p gt 1  Positioning and the transform property to vertically and horizontally center lt  p gt   lt p gt 2  CSS Layout - Horizontal  amp  Vertical Align lt  p gt    lt div class  container  gt     lt div class  center  gt       lt p gt I am vertically and horizontally centered  lt  p gt     lt  div gt   lt  div gt  x000D   x000D   x000D

User · Answer

This Code Is for Vertical Middle and Horizontal Center Align without specify fixed height    x000D   x000D   parent-class-name   x000D    position  relative  x000D    x000D   x000D   className   x000D    position  absolute  x000D    top  50   x000D    left  0  x000D    right  0  x000D    margin  0 auto  x000D    transform  translateY -50    x000D    -moz-transform  translateY -50    x000D    -webkit-transform  translateY -50    x000D    x000D   x000D   x000D

User · Answer

Use the translateY CSS property to vertically center your text in it s container   lt style gt   centertext       position  relative      top  50       transform  translateY 40        lt  style gt    And then apply it to your containing DIV     lt div class  centertext  gt           lt font style  color white  font-size 20px   gt    Your Text Here  lt  font gt     lt  div gt    Adjust the translateY percentage to suit your needs  Hope this helps

User · Answer

You can use Line height a big as height of the div  But for me best solution is this --  position relative  top 50   transform translate 0 50

User · Answer

Try this    main div      display  table      width  100      cells       display  table-cell      vertical-align  middle      Another method for centering a div    lt div id  parent  gt       lt div id  child  gt Content here lt  div gt   lt  div gt    parent  position  relative     child       position  absolute      top  0      bottom  0      left  0      right  0      width  50px      height  100px      margin  auto

User · Answer

How about adding line-height     abc    font Verdana  Geneva  sans-serif    font-size 18px    text-align left    background-color  0F0    height 50px    vertical-align middle    line-height  45px      Fiddle  line-height  Or padding on  abc  This is the result with padding  Update  Add in your css     abc img     vertical-align  middle      The result  Hope this what you looking for

User · Answer

Old question but nowadays CSS3 makes vertical alignment really simple   Just add to  abc the following css   display flex  align-items center    Simple Demo  Original question demo updated  Simple Example    x000D   x000D   vertical-align-content   x000D    background-color  f18c16  x000D    height 150px  x000D    display flex  x000D    align-items center  x000D       Uncomment next line to get horizontal align also    x000D       justify-content center     x000D    x000D   lt div class  vertical-align-content  gt  x000D    Hodor  x000D   lt  div gt  x000D   x000D   x000D

[css] vertical align middle in <div>

Examples related to css

Examples related to vertical-alignment