How to vertically center content with variable height within a div

Question

What is the best way to vertically center the content of a div when the height of the content is variable   In my particular case  the height of the container div is fixed  but it would be great if there were a solution that would work in cases where the container has a variable height as well  Also  I would love a solution with no  or very little use of CSS hacks and or non-semantic markup

User · Answer

This seems to be the best solution I   ve found to this problem  as long as your browser supports the   before pseudo element  CSS-Tricks  Centering in the Unknown   It doesn   t require any extra markup and seems to work extremely well   I couldn   t use the display  table method because table elements don   t obey the max-height property    x000D   x000D   block   x000D    height  300px  x000D    text-align  center  x000D    background   c0c0c0  x000D    border   a0a0a0 solid 1px  x000D    margin  20px  x000D    x000D   x000D   block  before   x000D    content      x000D    display  inline-block  x000D    height  100    x000D    vertical-align  middle  x000D    margin-right  -0 25em     Adjusts for spacing    x000D   x000D       For visualization  x000D    background   808080  width  5px  x000D       x000D    x000D   x000D   centered   x000D    display  inline-block  x000D    vertical-align  middle  x000D    width  300px  x000D    padding  10px 15px  x000D    border   a0a0a0 solid 1px  x000D    background   f5f5f5  x000D    x000D   lt div class  block  gt  x000D       lt div class  centered  gt  x000D           lt h1 gt Some text lt  h1 gt  x000D           lt p gt But he stole up to us again  and suddenly clapping his hand on my x000D             shoulder  said amp mdash  Did ye see anything looking like men going x000D             towards that ship a while ago   lt  p gt  x000D       lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

For me the best way to do this is    container    position  relative      element    position  absolute    top  50     transform  translateY -50        The advantage is not having to make the height explicit

User · Answer

You can use margin auto  With flex  the div seems to be centered vertically too     body  html     height  100     margin  0     site     height  100     display  flex     site  box     background   0ff    max-width  20vw    margin  auto       lt div class  site  gt     lt div class  box  gt       lt h1 gt blabla lt  h1 gt       lt p gt blabla lt  p gt       lt p gt blablabla lt  p gt       lt p gt lbibdfvkdlvfdks lt  p gt     lt  div gt   lt  div gt

User · Answer

This is something I have needed to do many times and a consistent solution still requires you add a little non-semantic markup and some browser specific hacks   When we get browser support for css 3 you ll get your vertical centering without sinning   For a better explanation of the technique you can look the article I adapted it from  but basically it involves adding an extra element and applying different styles in IE and browsers that support position table table-cell on non-table elements    lt div class  valign-outer  gt       lt div class  valign-middle  gt           lt div class  valign-inner  gt              Excuse me  What did you sleep in your clothes again last night  Really  You re gonna be in the car with her  Hey  not too early I sleep in on Saturday  Oh  McFly  your shoe s untied  Don t be so gullible  McFly  You got the place fixed up nice  McFly  I have you re car towed all the way to your house and all you ve got for me is light beer  What are you looking at  butthead  Say hi to your mom for me           lt  div gt       lt  div gt   lt  div gt    lt style gt         Non-structural styling         valign-outer   height  400px  border  1px solid red         valign-inner   border  1px solid blue     lt  style gt    lt  -- if lte IE 7  gt   lt style gt         For IE7 and earlier         valign-outer   position  relative  overflow  hidden         valign-middle   position  absolute  top  50          valign-inner   position  relative  top  -50     lt  style gt   lt   endif -- gt   lt  -- if gt IE 7  gt  -- gt   lt style gt         For other browsers         valign-outer   position  static  display  table  overflow  hidden         valign-middle   position  static  display  table-cell  vertical-align  middle  width  100      lt  style gt    There are many ways  hacks  to apply styles in specific sets of browsers  I used conditional comments but look at the article linked above to see two other techniques   Note  There are simple ways to get vertical centering if you know some heights in advance  if you are trying to center a single line of text  or in several other cases   If you have more details then throw them in because there may be a method that doesn t require browser hacks or non-semantic markup   Update  We are beginning to get better browser support for CSS3  bringing both flex-box and transforms as alternative methods for getting vertical centering  among other effects   See this other question for more information about modern methods  but keep in mind that browser support is still sketchy for CSS3

User · Answer

you can use flex display such as below code    x000D   x000D   example  x000D    background-color red  x000D    height 90px  x000D    width 90px  x000D    display flex  x000D    align-items center    for vertically center   x000D    justify-content center    for horizontally center   x000D    x000D   lt div class  example  gt  x000D       lt h6 gt Some text lt  h6 gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Using the child selector  I ve taken Fadi s incredible answer above and boiled it down to just one CSS rule that I can apply  Now all I have to do is add the contentCentered class name to elements I want to center    x000D   x000D   contentCentered   x000D    text-align  center  x000D    x000D   x000D   contentCentered  before   x000D    content      x000D    display  inline-block  x000D    height  100    x000D    vertical-align  middle  x000D    margin-right  - 25em     Adjusts for spacing    x000D    x000D   x000D   contentCentered  gt      x000D    display  inline-block  x000D    vertical-align  middle  x000D    x000D   lt div class  contentCentered  gt  x000D     lt div gt  x000D       lt h1 gt Some text lt  h1 gt  x000D       lt p gt But he stole up to us again  and suddenly clapping his hand on my x000D        shoulder  said amp mdash  Did ye see anything looking like men going x000D        towards that ship a while ago   lt  p gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Forked CodePen  http   codepen io dougli pen Eeysg

User · Answer

This is my awesome solution for a div with a dynamic  percentaged  height   CSS   vertical placer    background red    position absolute     height 43      width 100     display  table      inner placer      display  table-cell    vertical-align  middle    text-align center      inner placer svg    position relative    color  fff    background blue    width 30     min-height 20px    max-height 60px    height 20       HTML   lt div class  footer  gt       lt div class  vertical placer  gt           lt div class  inner placer  gt               lt svg gt  some Text here lt  svg gt           lt  div gt       lt  div gt   lt  div gt      Try this by yourself

User · Answer

Just add  position  relative  top  50   transform  translateY -50      to the inner div   What it does is moving the inner div s top border to the half height of the outer div  top  50    and then the inner div up by half its height  transform  translateY -50     This will work with position  absolute or relative   Keep in mind that transform and translate have vendor prefixes which are not included for simplicity   Codepen  http   codepen io anon pen ZYprdb

User · Answer

Best result for me so far    div to be centered   position  absolute  top  50   transform  translateY -50    margin  0 auto  right  0  left  0

[css] How to vertically center content with variable height within a div?

Examples related to css

Examples related to vertical-alignment