Div table-cell vertical align not working

Question

I am trying to simply center text horizontally and vertically using DIV and display type as table-cell but it is not working in either IE8 or Firefox   Below is the CSS that I am using and that is all that is in the html page    charset  utf-8      CSS Document    html  body       background-color  FFFFFF      font-family Arial  Helvetica  sans-serif      margin  0      padding  0      padding-top  5px    div Main       background-color  FFFFFF      border-collapse collapse      width 800px      margin-left auto      margin-right auto    div MainHeader       color  C00000      font-size 18pt      font-weight bold      text-align center      width 800px    div BlackBox       background-color  000000      color  FFFF00      display table-cell      float left      font-size 18pt      font-weight bold      height 191px      text-align center      vertical-align middle      width 630px    div BlackBoxPicture       background-color  000000      float right      height 191px      margin-top auto      margin-bottom auto      text-align right      vertical-align bottom      width 170px      What am I doing wrong

User · Answer

This is how I do it   CSS   html  body       margin  0      padding  0      width  100       height  100       display  table    content       display  table-cell      text-align  center      vertical-align  middle     HTML    lt div id  content  gt      Content goes here  lt  div gt    See  Example of vertical centering  and  CSS  centering things

User · Answer

Sometime floats brake the vertical align  is better to avoid them

User · Answer

You can vertically align a floated element in a way which works on IE 6   It doesn t need  full table markup either  This method isn t perfectly clean - includes wrappers and there are  a few things to be aware of e g  if you have too much text outspilling the container - but it s pretty good     Short answer  You just need to apply display  table-cell to an element inside the floated element  table cells don t float   and use a fallback with position  absolute and top for old IE     Long answer  Here s a jsfiddle showing the basics  The important stuff summarized  with a conditional comment adding an  old-ie class         wrap           float  left          height  100px     any fixed amount               wrap2           height  inherit             content           display  table-cell          height  inherit          vertical-align  middle              old-ie  wrap          position  relative             old-ie  wrap2           position  absolute          top  50              old-ie  content           position  relative          top  -50           display  block          Here s a jsfiddle that deliberately highlight the minor faults with this method  Note how    In standards browsers  content that exceeds the height of the wrapper element stops centering and starts going down the page  This isn t a big problem  probably looks better than creeping up the page   and can be avoided by avoiding content that is too big  note that unless I ve overlooked something  overflow methods like overflow  auto  don t seem to work  In old IE  the content element doesn t stretch to fill the available space - the height is the height of the content  not of the container    Those are pretty minor limitations  but worth being aware of   Code and idea adapted from here

User · Answer

Float it with another wrapper without using display  table   it works    lt div style  float  right   gt      lt div style  display  table-cell  vertical-align  middle  width  50   height  50    gt I am vertically aligned on your right     lt  div gt   lt  div gt

User · Answer

see this bin  http   jsbin com yacom 2 edit  should set parent element to  display table-cell  vertical-align middle  text-align center

User · Answer

Set the height for the parent element

User · Answer

Because you still using float     try to remove  float  and wrap it with display table  example     lt div style  display table  gt    lt div style  display table-cell vertical-align middle text-align center  gt         Hai i m center here Lol   lt  div gt   lt  div gt

User · Answer

In my case  I wanted to center in a parent container with position  absolute    lt div class  absolute-container  gt       lt div class  parent-container  gt           lt div class  centered-content  gt              My content          lt  div gt       lt  div gt   lt  div gt    I had to add some positioning for top  bottom  left  amp  right    absolute-container       position absolute      top 0      left 0      bottom 0      right 0      parent-container       margin  0      padding  0      width  100       height  100       display  table     centered-content       display  table-cell      text-align  center      vertical-align  middle

User · Answer

I think table-cell needs to have a parent display table element

User · Answer

An element styled as follows will be aligned vertically to middle     content       position relative       -webkit-transform  translateY -50         -ms-transform  translateY -50         transform  translateY -50         top 50       However  the parent element must have a fixed height   See this fiddle  https   jsfiddle net 15d0qfdg 12

[css] Div table-cell vertical align not working

Examples related to css

Examples related to html

Examples related to alignment