Vertically center text in a 100 height div

Question

I am working with a div that is 100  of the parent divs height   The div only contains a single line of text   The div cannot have a fixed height   So my question is   How do I vertically center the line of text   I have tried using   display  table-cell    line-height 200     If it is important the div is absolutely positioned    Current CSS   requests       position  absolute      right  0      height  100       width  50px      padding  0 10px      background-color   69A4B5      display  table-cell      vertical-align  middle      border-bottom-right-radius  5px

User · Answer

I disagree  here s a JS free solution  which works    lt html style  height  100    gt       lt body style  vertical-align  middle  margin  0px  height  100    gt           lt div style  height  100   width  100   display  table  background-color   ccc   gt               lt div style  display  table-cell  width  100   vertical-align  middle   gt                   lt div style  height  300px  width  600px  background-color  wheat  margin-left  auto  margin-right  auto   gt A lt  div gt               lt  div gt           lt  div gt       lt  body gt   lt  html gt

User · Answer

Even though this question is pretty old  here s a solution that works with both single and multiple lines that need to be centered vertically  could easily be centered both vertically  amp  horizontally as seen in the css in the Demo   HTML   lt div class  parent  gt       lt div class  child  gt Text that needs to be vertically centered lt  div gt   lt  div gt      CSS   parent       position  relative      height  400px      child       position  absolute      top  50       -webkit-transform  translateY -50        -ms-transform  translateY -50        transform  translateY -50

User · Answer

Since it is absolutely positioned you can use top  50  to vertically align it in the center   But then you run into the issue of the page being bigger than you want it to be  For that you can use the overflow  hidden for the parent div  This is what I used to create the same effect   The CSS   div parent       width  100       height  300px      position  relative      overflow  hidden    div parent div absolute       position  absolute      top  50       height  300px      The HTML    lt div class  parent  gt       lt div class  absolute  gt This is vertically center aligned lt  div gt   lt  div gt

User · Answer

Did you try vertical-align  middle      You can find more info on vertical-align here  http   www w3schools com css pr pos vertical-align asp

User · Answer

have you tried line-height 1em   I recall that that s the way to get it to center vertically

User · Answer

If you know how tall your text is going to be you can use a combination of top 50  and margin-top -x px  where x is half the height of your text   Working example  http   jsfiddle net Qy4yy

User · Answer

Try this one http   jsfiddle net Husamuddin ByNa3  it works fine with me   css   table       width 100       height 100       position absolute      display table     cell       display table-cell      vertical-align middle      width 100       height 100       and the html     lt div class  table  gt       lt div class  cell  gt Hello  I m in the middle lt  div gt   lt  div gt

User · Answer

Vertical align  dynamic height combined with absolute position is except some special conditions not possible without a few lines of JS  eg  jQuery    can possibly be solved with backend code in some cases  or min-height combined with sensible top or margin styles  but not perfect   I mostly only use absolute position when something is supposed to  popup  in relation to something else which is in the float  I think that s the best way to use it so you don t have to fiddle with things like this   No offense  but most answers in here are way off

User · Answer

The best and easiest way to do it  currently in 2015 2020  is using flexbox    parent-selector       display  flex      align-items  center      And that s it  D  Check-out this working example    x000D   x000D  div   x000D      border  1px solid red  x000D      height  150px  x000D      width  350px  x000D      justify-content  center  x000D   x000D         Actual code    x000D      display  flex  x000D      align-items  center  x000D    x000D   lt div gt  x000D       lt p gt Hola lt  p gt  x000D   lt  div gt  x000D   x000D   x000D    Old answer  You can use vertical-align  middle if you specify also display  table-cell    div       display  table-cell      vertical-align  middle      Working example    x000D   x000D  div   x000D    border  1px solid red  x000D    height  150px  x000D    width  350px  x000D    text-align  center  x000D     x000D       Actual code    x000D    display  table-cell  x000D    vertical-align  middle  x000D    x000D   lt div gt  x000D       lt p gt Hola lt  p gt  x000D   lt  div gt  x000D   x000D   x000D    If it does not work you can try setting its parent as display  table     parent-selector       display  table      Edit  You have this method plus all the methods covered on this question in this other question  How do I vertically center text with CSS

User · Answer

Modern solution - works in all browsers and IE9   caniuse - browser support    v-center     position  relative    top  50     -webkit-transform  translateY -50          -ms-transform  translateY -50              transform  translateY -50        Example  http   jsbin com rehovixufe 1

User · Answer

Setting the line height to the same as the height of the div will cause the text to center  Only works if there is one line   such as a button

User · Answer

just wrap your content with a table like this      lt table width  100   height  100   gt            lt tr align  center  gt                  lt th align  center  gt                   text                 lt  th gt             lt  tr gt     lt  table gt  lt

User · Answer

This answer is no longer the best answer     see the flexbox answer below instead     To get it perfectly centered  as mentioned in david s answer  you need to add a negative top margin   If you know  or force  there to only be a single line of text  you can use   margin-top  -0 5em   for example   http   jsfiddle net 45MHk 623     CSS  html  body  div       height  100       parent       position relative      border  1px solid black      child       position  absolute      top  50          adjust top up half the height of a single line        margin-top  -0 5em         force content to always be a single line        overflow  hidden      white-space  nowrap      width  100       text-overflow  ellipsis       HTML   lt div id  parent  gt       lt div id  child  gt Text that is suppose to be centered lt  div gt   lt  div gt     The originally accepted answer will not vertically center on the middle of the text  it centers based on the top of the text    So  if you parent is not very tall  it will not look centered at all  for example   http   jsfiddle net 45MHk     CSS   parent       position relative      height  3em      border  1px solid black      child       position  absolute      top  50          HTML   lt div id  parent  gt       lt div id  child  gt Text that is suppose to be centered lt  div gt   lt  div gt

[html] Vertically center text in a 100% height div?

Examples related to html

Examples related to css

Examples related to centering