How to vertically center a div element for all browsers using CSS

Question

I want to center a div vertically with CSS  I don t want tables or JavaScript  but only pure CSS  I found some solutions  but all of them are missing Internet Explorer 6 support    lt body gt       lt div gt Div to be aligned vertically lt  div gt   lt  body gt    How can I center a div vertically in all major browsers  including Internet Explorer 6

User · Answer

Now the flexbox solution is a very easy way for modern browsers, so I recommend this for you:

_x000D_

.container{_x000D_
    display: flex;_x000D_
    align-items: center;_x000D_
    justify-content: center;_x000D_
    height: 100%;_x000D_
    background:green;_x000D_
}_x000D_
_x000D_
body, html{_x000D_
  height:100%;_x000D_
}

_x000D_

<div class="container">_x000D_
    <div>Div to be aligned vertically</div>_x000D_
</div>

_x000D_

User · Answer

I just wrote this CSS and to know more  please go through  This article with vertical align anything with just 3 lines of CSS    element       position  relative      top  50       transform  perspective 1px  translateY -50

User · Answer

I did it with this  change width  height  margin-top and margin-left accordingly     wrapper       width 960px      height 590px      position absolute      top 50       left 50       margin-top -295px      margin-left -480px      lt div class  wrapper  gt  -- Content --  lt  div gt

User · Answer

Just do it  Add the class at your div    modal     margin  auto    position  absolute    top  0    right  0    left  0    bottom  0    height  240px      And read this article for an explanation  Note  Height is necessary

User · Answer

This worked in my case  only tested in modern browsers     textthatneedstobecentered     margin  auto    top  0  bottom  0

User · Answer

The contents can be easily centered by using flexbox  The following code shows the CSS for the container inside which the contents needs to be centered    absolute-center       display  -ms-flexbox      display  -webkit-flex      display  flex       -ms-flex-align  center      -webkit-align-items  center      -webkit-box-align  center       align-items  center

User · Answer

A modern way to center an element vertically would be to use flexbox   You need a parent to decide the height and a child to center   The example below will center a div to the center within your browser  What s important  in my example  is to set height  100  to body and html and then min-height  100  to your container    x000D   x000D  body  html   x000D    background   F5F5F5  x000D    box-sizing  border-box  x000D    height  100   x000D    margin  0  x000D    x000D   x000D   center container   x000D    align-items  center  x000D    display  flex  x000D    min-height  100   x000D    x000D   x000D   center   x000D    background  white  x000D    margin  0 auto  x000D    padding  10px  x000D    text-align  center  x000D    width  200px  x000D    x000D   lt div id  center container  gt  x000D     lt div id  center  gt I am center  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

The three lines of code using transform works practically on modern browsers and Internet nbsp Explorer    element       position  relative       top  50        transform  translateY -50         -moz-transform  translateY -50         -webkit-transform  translateY -50         -ms-transform  translateY -50        I am adding this answer since I found some incompleteness in the previous version of this answer  and Stack Overflow won t allow me to simply comment      position  relative messes up the styling if the current div is in the body and has no container div  However  fixed  seems to work  but it obviously fixes the content in the center of the viewport  Also I used this styling for centering some overlay divs and found that in Mozilla all elements inside this transformed div had lost their bottom borders  Possibly a rendering issue  But adding just the minimal padding to some of them rendered it correctly  Chrome and Internet nbsp Explorer  surprisingly  rendered the boxes without any need for padding

User · Answer

The following is working in my case and was tested in Firefox    element       display  block      transform  translateY 50        -moz-transform  translateY 50        -webkit-transform  translateY 50        -ms-transform  translateY 50        The div s height and parent s height are dynamic  I use it when there are other elements on the same parent which is higher than the target element  where both are positioned horizontally inline

User · Answer

By using the transform property we can do a vertically centered div easily    x000D   x000D   main-div   x000D      background  none repeat scroll 0 0  999  x000D      font-size  18px  x000D      height  450px  x000D      max-width  850px  x000D      padding  15px  x000D    x000D   x000D   vertical-center   x000D      background  none repeat scroll 0 0  1FA67A  x000D      color   FFFFFF  x000D      padding  15px  x000D      position  relative  x000D      top  50   x000D      transform  translateY -50    x000D      -moz-transform  translateY -50    x000D      -webkit-transform  translateY -50    x000D      -ms-transform  translateY -50    x000D      -o-transform  translateY -50    x000D    x000D   lt div class  main-div  gt  x000D       lt div class  vertical-center  gt  x000D           lt span gt  Lorem ipsum dolor sit amet  consectetur adipiscing elit  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua  Ut enim ad minim veniam  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur  Excepteur sint occaecat cupidatat non proident  sunt in culpa qui officia deserunt mollit anim id est laborum   lt  span gt  x000D       lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    See here for full article

User · Answer

Just do it  Add the class at your div    modal     margin  auto    position  absolute    top  0    right  0    left  0    bottom  0    height  240px      And read this article for an explanation  Note  Height is necessary

User · Answer

Not answering for browser compatibility but to also mention the new Grid and the not so new Flexbox feature   Grid  From  Mozilla - Grid Documentation - Align Div Vertically  Browser Support  Grid Browser Support  CSS    wrapper     display  grid    grid-template-columns  repeat 4  1fr     grid-gap  10px    grid-auto-rows  200px    grid-template-areas          a a           a a        item1     grid-area  a    align-self  center    justify-self  center      HTML    lt div class  wrapper  gt    lt div class  item1  gt Item 1 lt  div gt   lt  div gt    Flexbox  Browser Support  Flexbox Browser Support  CSS   display  -webkit-box  display  -moz-box  display  -ms-flexbox  display  -webkit-flex  display  flex  align-items  center  justify-content  center

User · Answer

Below is the best all-around solution I could build to vertically and horizontally center a fixed-width  flexible height content box  It was tested and working for recent versions of Firefox  Opera  Chrome  and Safari    x000D   x000D   outer   x000D    display  table  x000D    position  absolute  x000D    top  0  x000D    left  0  x000D    height  100   x000D    width  100   x000D    x000D   x000D   middle   x000D    display  table-cell  x000D    vertical-align  middle  x000D    x000D   x000D   inner   x000D    margin-left  auto  x000D    margin-right  auto  x000D    width  400px  x000D      whatever width you want   x000D    x000D   lt div class  outer  gt  x000D     lt div class  middle  gt  x000D       lt div class  inner  gt  x000D         lt h1 gt The Content lt  h1 gt  x000D         lt p gt Once upon a midnight dreary    lt  p gt  x000D       lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    View A Working Example With Dynamic Content  I built in some dynamic content to test the flexibility and would love to know if anyone sees any problems with it  It should work well for centered overlays also -- lightbox  pop-up  etc

User · Answer

Vertical  amp  Horizontal CENTER  HTML   lt div id  dialog  gt Centered Dialog lt  div gt    CSS   dialog       position fixed  top 50   left 50   z-index 99991      width 300px  height 60px      margin-top -150px      half of the width        margin-left -30px     half of the height       Enjoy

User · Answer

x000D   x000D   center   x000D    position  absolute  x000D    top  50   x000D    left  50   x000D    transform  translate -50   -50        x  y     gt  position    x000D    -ms-transform  translate -50   -50       IE 9    x000D    -webkit-transform  translate -50   -50       Chrome  Safari  Opera        x000D    x000D   x000D   vertical   x000D    position  absolute  x000D    top  50   x000D      left  0  x000D    transform  translate 0  -50        x  y    gt  position    x000D    x000D   x000D   horizontal   x000D    position  absolute  x000D      top  0  x000D    left  50   x000D    transform  translate -50   0       x  y     gt  position    x000D    x000D   x000D  div   x000D    padding  1em  x000D    background-color  grey   x000D    color  white  x000D      x000D   lt body gt  x000D     lt div class  vertical  gt Vertically left lt  div gt  x000D     lt div class  horizontal  gt Horizontal top lt  div gt  x000D     lt div class  center  gt Vertically Horizontal lt  div gt    x000D   lt  body gt  x000D   x000D   x000D    Related  Center a Image

User · Answer

Actually you need two div s for vertical centering  The div containing the content must have a width and height    x000D   x000D   container   x000D    position  absolute  x000D    top  50   x000D    margin-top  -200px  x000D       half of  content height   x000D    left  0  x000D    width  100   x000D    x000D   x000D   content   x000D    width  624px  x000D    margin-left  auto  x000D    margin-right  auto  x000D    height  395px  x000D    border  1px solid  000000  x000D    x000D   lt div id  container  gt  x000D     lt div id  content  gt  x000D       lt h1 gt Centered div lt  h1 gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Here is the result

User · Answer

Below is the best all-around solution I could build to vertically and horizontally center a fixed-width  flexible height content box  It was tested and working for recent versions of Firefox  Opera  Chrome  and Safari    x000D   x000D   outer   x000D    display  table  x000D    position  absolute  x000D    top  0  x000D    left  0  x000D    height  100   x000D    width  100   x000D    x000D   x000D   middle   x000D    display  table-cell  x000D    vertical-align  middle  x000D    x000D   x000D   inner   x000D    margin-left  auto  x000D    margin-right  auto  x000D    width  400px  x000D      whatever width you want   x000D    x000D   lt div class  outer  gt  x000D     lt div class  middle  gt  x000D       lt div class  inner  gt  x000D         lt h1 gt The Content lt  h1 gt  x000D         lt p gt Once upon a midnight dreary    lt  p gt  x000D       lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    View A Working Example With Dynamic Content  I built in some dynamic content to test the flexibility and would love to know if anyone sees any problems with it  It should work well for centered overlays also -- lightbox  pop-up  etc

User · Answer

This is always where I go when I have to come back to this issue   For those who don t want to make the jump    Specify the parent container as position relative or position absolute  Specify a fixed height on the child container  Set position absolute and top 50  on the child container to move the top down to the middle of the parent  Set margin-top -yy where yy is half the height of the child container to offset the item up     An example of this in code    lt style type  text css  gt       myoutercontainer  position relative       myinnercontainer  position absolute  top 50   height 10em  margin-top -5em   lt  style gt       lt div id  myoutercontainer  gt       lt div id  myinnercontainer  gt           lt p gt Hey look  I m vertically centered  lt  p gt           lt p gt How sweet is this   lt  p gt       lt  div gt   lt  div gt

User · Answer

Unfortunately     but not surprisingly     the solution is more complicated than one would wish it to be  Also unfortunately  you ll need to use additional divs around the div you want vertically centered   For standards-compliant browsers like Mozilla  Opera  Safari  etc  you need to set the outer div to be displayed as a table and the inner div to be displayed as a table-cell     which can then be vertically centered  For Internet Explorer  you need to position the inner div absolutely within the outer div and then specify the top as 50   The following pages explain this technique well and provide some code samples too    Vertical Centering in CSS Vertical Centering in CSS with Unknown Height  Internet nbsp Explorer nbsp 7 compatible   no longer live  Vertical Centering in CSS with Unknown Height  Internet nbsp Explorer nbsp 7 compatible   Archived article courtesy of the Wayback Machine    There is also a technique to do the vertical centering using JavaScript  Vertical alignment of content with JavaScript  amp  CSS demonstrates it

User · Answer

Use the CSS Flexbox align-items property to achieve this   x000D   x000D  html  body       height  100      body     display  flex    align-items  center    x000D   lt div gt This is centered vertically lt  div gt  x000D   x000D   x000D

User · Answer

There is a trick I found out recently  You need to use top 50   amp  then you do a translateY -50     x000D   x000D   outer-div   x000D    position  relative  x000D    height  150px  x000D    width  150px  x000D    background-color  red  x000D    x000D   x000D   centered-div   x000D    position  absolute  x000D    top  50   x000D    -webkit-transform  translateY -50    x000D    -ms-transform  translateY -50    x000D    transform  translateY -50    x000D    background-color  white  x000D    x000D   lt div class  outer-div  gt  x000D     lt div class  centered-div  gt  x000D      Test text x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

There is a trick I found out recently  You need to use top 50   amp  then you do a translateY -50     x000D   x000D   outer-div   x000D    position  relative  x000D    height  150px  x000D    width  150px  x000D    background-color  red  x000D    x000D   x000D   centered-div   x000D    position  absolute  x000D    top  50   x000D    -webkit-transform  translateY -50    x000D    -ms-transform  translateY -50    x000D    transform  translateY -50    x000D    background-color  white  x000D    x000D   lt div class  outer-div  gt  x000D     lt div class  centered-div  gt  x000D      Test text x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Unfortunately     but not surprisingly     the solution is more complicated than one would wish it to be  Also unfortunately  you ll need to use additional divs around the div you want vertically centered   For standards-compliant browsers like Mozilla  Opera  Safari  etc  you need to set the outer div to be displayed as a table and the inner div to be displayed as a table-cell     which can then be vertically centered  For Internet Explorer  you need to position the inner div absolutely within the outer div and then specify the top as 50   The following pages explain this technique well and provide some code samples too    Vertical Centering in CSS Vertical Centering in CSS with Unknown Height  Internet nbsp Explorer nbsp 7 compatible   no longer live  Vertical Centering in CSS with Unknown Height  Internet nbsp Explorer nbsp 7 compatible   Archived article courtesy of the Wayback Machine    There is also a technique to do the vertical centering using JavaScript  Vertical alignment of content with JavaScript  amp  CSS demonstrates it

User · Answer

Not answering for browser compatibility but to also mention the new Grid and the not so new Flexbox feature   Grid  From  Mozilla - Grid Documentation - Align Div Vertically  Browser Support  Grid Browser Support  CSS    wrapper     display  grid    grid-template-columns  repeat 4  1fr     grid-gap  10px    grid-auto-rows  200px    grid-template-areas          a a           a a        item1     grid-area  a    align-self  center    justify-self  center      HTML    lt div class  wrapper  gt    lt div class  item1  gt Item 1 lt  div gt   lt  div gt    Flexbox  Browser Support  Flexbox Browser Support  CSS   display  -webkit-box  display  -moz-box  display  -ms-flexbox  display  -webkit-flex  display  flex  align-items  center  justify-content  center

User · Answer

Using flex property of CSS    x000D   x000D   parent   x000D      width  400px  x000D      height 200px  x000D      background  blue  x000D      display  flex  x000D      align-items  center  x000D      justify-content center  x000D    x000D   x000D   child   x000D      width  75px  x000D      height  75px  x000D      background  yellow  x000D    x000D   lt div class  parent  gt  x000D       lt div class  child  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    or by using display  flex  and margin  auto    x000D   x000D   parent   x000D      width  400px  x000D      height 200px  x000D      background  blue  x000D      display  flex  x000D    x000D   x000D   child   x000D      width  75px  x000D      height  75px  x000D      background  yellow  x000D      margin auto  x000D    x000D   lt div class  parent  gt  x000D       lt div class  child  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    show text center   x000D   x000D   parent   x000D      width  400px  x000D      height  200px  x000D      background  yellow  x000D      display  flex  x000D      align-items  center  x000D      justify-content center  x000D    x000D   lt div class  parent  gt Center lt  div gt  x000D   x000D   x000D    Using percentage    height and width   x000D   x000D   parent   x000D      position  absolute  x000D      height 100   x000D      width 100   x000D      background  blue  x000D      display  flex  x000D      align-items  center  x000D      justify-content center  x000D    x000D   x000D   child   x000D      width  75px  x000D      height  75px  x000D      background  yellow  x000D    x000D   lt div class  parent  gt  x000D       lt div class  child  gt  lt  div gt  x000D   lt  div gt   x000D   x000D   x000D

User · Answer

To center the div on a page  check the fiddle link    x000D   x000D   vh   x000D      margin  auto  x000D      position  absolute  x000D      top  0  x000D      left  0  x000D      bottom  0  x000D      right  0  x000D    x000D   box  x000D      border-radius  15px  x000D      box-shadow  0 0 8px rgba 0  0  0  0 4   x000D      padding  25px  x000D      width  100px  x000D      height  100px  x000D      background  white  x000D    x000D   lt div id  vh  class  box  gt Div to be aligned vertically lt  div gt  x000D   x000D   x000D    Another option is to use flex box  check the fiddle link    x000D   x000D   vh   x000D      background-color   ddd  x000D      height  400px  x000D      align-items  center  x000D      display  flex  x000D    x000D   vh  gt  div   x000D      width  100   x000D      text-align  center  x000D      vertical-align  middle  x000D    x000D   lt div class  vh  gt  x000D       lt div gt Div to be aligned vertically lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Another option is to use a CSS 3 transform    x000D   x000D   vh   x000D      position  absolute  x000D      top  50   x000D      left  50   x000D        transform  translateX -50   translateY -50      x000D      transform  translate -50   -50    x000D    x000D   box  x000D      border-radius  15px  x000D      box-shadow  0 0 8px rgba 0  0  0  0 4   x000D      padding  25px  x000D      width  100px  x000D      height  100px  x000D      background  white  x000D    x000D   lt div id  vh  class  box  gt Div to be aligned vertically lt  div gt  x000D   x000D   x000D

User · Answer

Edit 2020   only use this if you need to support old browsers like IE8  which you should refuse to do    If not  use flexbox     This is the simplest method I found and I use it all the time  jsFiddle demo here   Thank Chris Coyier from CSS Tricks for this article    x000D   x000D  html  body  x000D    height  100   x000D    margin  0  x000D    x000D   v-wrap  x000D      height  100   x000D      white-space  nowrap  x000D      text-align  center  x000D    x000D   v-wrap before  x000D      content      x000D      display  inline-block  x000D      vertical-align  middle  x000D      width  0  x000D         adjust for white space between pseudo element and next sibling    x000D      margin-right  - 25em  x000D         stretch line height    x000D      height  100    x000D    x000D   v-box  x000D      display  inline-block  x000D      vertical-align  middle  x000D      white-space  normal  x000D    x000D   lt div class  v-wrap  gt  x000D       lt article class  v-box  gt  x000D           lt p gt This is how I ve been doing it for some time lt  p gt  x000D       lt  article gt  x000D   lt  div gt  x000D   x000D   x000D    Support starts with IE8

User · Answer

For new comers please try   display  flex  align-items  center  justify-content  center

User · Answer

This worked in my case  only tested in modern browsers     textthatneedstobecentered     margin  auto    top  0  bottom  0

User · Answer

This is by far the easiest approach  works on non-blocking elements as well  the only downside is  it s Flexbox  thus  older browsers will not support this    lt div class  sweet-overlay  gt       lt img class  centered  src  http   jimpunk com Loading loading83 gif    gt   lt  div gt    Link to codepen   http   codepen io damianocel pen LNOdRp  The important point here is  for vertical centering  we need to define a parent element  container  and the img must have a smaller height than the parent element

User · Answer

x000D   x000D   center   x000D    position  absolute  x000D    top  50   x000D    left  50   x000D    transform  translate -50   -50        x  y     gt  position    x000D    -ms-transform  translate -50   -50       IE 9    x000D    -webkit-transform  translate -50   -50       Chrome  Safari  Opera        x000D    x000D   x000D   vertical   x000D    position  absolute  x000D    top  50   x000D      left  0  x000D    transform  translate 0  -50        x  y    gt  position    x000D    x000D   x000D   horizontal   x000D    position  absolute  x000D      top  0  x000D    left  50   x000D    transform  translate -50   0       x  y     gt  position    x000D    x000D   x000D  div   x000D    padding  1em  x000D    background-color  grey   x000D    color  white  x000D      x000D   lt body gt  x000D     lt div class  vertical  gt Vertically left lt  div gt  x000D     lt div class  horizontal  gt Horizontal top lt  div gt  x000D     lt div class  center  gt Vertically Horizontal lt  div gt    x000D   lt  body gt  x000D   x000D   x000D    Related  Center a Image

User · Answer

This solution worked for me if you have a block element  e  g     I used the colors to make the solution clearer   HTML    lt main class  skin orange  gt   lt p gt As you can the the element box is vertically centered lt  p gt   lt div class  bigBox skin blue  gt Blue Box lt  div gt   lt  main gt    CSS   main       position  relative      width  400px      height  400px      skin orange       outline  thin dotted red      background  orange      bigBox       width  150px      height  150px      position  absolute      top  50       transform  translateY -50        skin blue       background-color  blue        JSFiddle Code Demo

User · Answer

The easiest solution is below    x000D   x000D   outer-div  x000D    width  100   x000D    height  200px  x000D    display  flex  x000D    border 1px solid  000  x000D    x000D   inner-div  x000D    margin  auto  x000D    text-align center  x000D    border 1px solid red  x000D    x000D   lt div class  outer-div  gt  x000D     lt div class  inner-div  gt  x000D      Hey there  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

I find this one most useful   it gives the most accurate  H  layout and is very simple to understand   The benefit in this markup is that you define your content size in a single place -   PageContent    The Colors of the page background and its horizontal margins are defined in their corresponding divs    lt div id  PageLayoutConfiguration        style  display  table       position absolute  top  0px  right  0px  bottom  0px  left  0px       width  100   height  100    gt            lt div id  PageBackground                style  display  table-cell  vertical-align  middle               background-color  purple   gt                lt div id  PageHorizontalMargins                   style  width  100                    background-color  seashell   gt                    lt div id  PageContent                        style  width  1200px  height  620px  margin  0 auto                       background-color  grey   gt                        my content goes here                      lt  div gt               lt  div gt           lt  div gt       lt  div gt    And here with CSS separated    lt div id  PageLayoutConfiguration  gt        lt div id  PageBackground  gt             lt div id  PageHorizontalMargins  gt                  lt div id  PageContent  gt                       my content goes here                    lt  div gt             lt  div gt        lt  div gt   lt  div gt    PageLayoutConfiguration     display  table  width  100   height  100      position absolute  top  0px  right  0px  bottom  0px  left  0px      PageBackground     display  table-cell  vertical-align  middle     background-color  purple      PageHorizontalMargins     style  width  100      background-color  seashell     PageContent     width  1200px  height  620px  margin  0 auto     background-color  grey

User · Answer

The simplest way would be the following 3 lines of CSS   1  position  relative   2  top  50    3  transform  translateY -50     Following is an EXAMPLE    x000D   x000D  div outer-div   x000D    height  170px  x000D    width  300px  x000D    background-color  lightgray  x000D    x000D   x000D  div middle-div   x000D    position  relative  x000D    top  50   x000D    -webkit-transform  translateY -50    x000D    -ms-transform  translateY -50    x000D    transform  translateY -50    x000D    x000D   lt div class  outer-div  gt  x000D     lt div class  middle-div  gt  x000D      Test text x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Centering only vertically If you don t care about Internet Explorer 6 and 7  you can use a technique that involves two containers  The outer container   should have display  table   The inner container   should have display  table-cell  should have vertical-align  middle   The content box   should have display  inline-block   You can add any content you want to the content box without caring about its width or height  Demo   x000D   x000D  body       margin  0      outer-container       position  absolute      display  table      width  100      This could be ANY width        height  100      This could be ANY height        background   ccc      inner-container       display  table-cell      vertical-align  middle      centered-content       display  inline-block      background   fff      padding  20px      border  1px solid  000    x000D   lt div class  outer-container  gt      lt div class  inner-container  gt        lt div class  centered-content  gt          Malcolm in the Middle       lt  div gt      lt  div gt   lt  div gt  x000D   x000D   x000D   See also this Fiddle   Centering horizontally and vertically If you want to center both horizontally and vertically  you also need the following  The inner container   should have text-align  center   The content box   should re-adjust the horizontal text-alignment to for example text-align  left  or text-align  right   unless you want text to be centered  Demo   x000D   x000D  body       margin  0      outer-container       position  absolute      display  table      width  100      This could be ANY width        height  100      This could be ANY height        background   ccc      inner-container       display  table-cell      vertical-align  middle      text-align  center      centered-content       display  inline-block      text-align  left      background   fff      padding  20px      border  1px solid  000    x000D   lt div class  outer-container  gt      lt div class  inner-container  gt        lt div class  centered-content  gt           Malcolm in the Middle       lt  div gt      lt  div gt   lt  div gt  x000D   x000D   x000D   See also this Fiddle

User · Answer

The best thing to do would be    vertalign    height  300px    width  300px    position  absolute    top  calc 50vh - 150px        150 pixels because that s half of the div s height in this case

User · Answer

This method doesn t use any transform  So it doesn t have a problem with the output becoming blurry   position  absolute  width  100vw  top  25   bottom  25   text-align  center

User · Answer

One more I can t see on the list    Center-Container     position  relative    height  100       Absolute-Center     width  50     height  50     overflow  auto    margin  auto    position  absolute    top  0  left  0  bottom  0  right  0    border  solid black       Cross-browser  including Internet nbsp Explorer nbsp 8 - Internet nbsp Explorer nbsp 10 without hacks   Responsive with percentages and min- max- Centered regardless of padding  without box-sizing   height must be declared  see Variable Height  Recommended setting overflow  auto to prevent content spillover  see Overflow    Source  Absolute Horizontal And Vertical Centering In CSS

User · Answer

Declare this Mixin    mixin vertical-align  position  relative      position   position    top  50     -webkit-transform  translateY -50      -ms-transform  translateY -50      transform  translateY -50        Then include it in your element    element       include vertical-align

User · Answer

After a lot of research I finally found the ultimate solution  It works even for floated elements  View Source    element       position  relative      top  50       transform  translateY -50       or try 50

User · Answer

Use the CSS Flexbox align-items property to achieve this   x000D   x000D  html  body       height  100      body     display  flex    align-items  center    x000D   lt div gt This is centered vertically lt  div gt  x000D   x000D   x000D

User · Answer

This is always where I go when I have to come back to this issue   For those who don t want to make the jump    Specify the parent container as position relative or position absolute  Specify a fixed height on the child container  Set position absolute and top 50  on the child container to move the top down to the middle of the parent  Set margin-top -yy where yy is half the height of the child container to offset the item up     An example of this in code    lt style type  text css  gt       myoutercontainer  position relative       myinnercontainer  position absolute  top 50   height 10em  margin-top -5em   lt  style gt       lt div id  myoutercontainer  gt       lt div id  myinnercontainer  gt           lt p gt Hey look  I m vertically centered  lt  p gt           lt p gt How sweet is this   lt  p gt       lt  div gt   lt  div gt

User · Answer

The answer from Billbad only works with a fixed width of the  inner div  This solution works for a dynamic width by adding the attribute text-align  center to the  outer div    x000D   x000D   outer   x000D    position  absolute  x000D    display  table  x000D    width  100   x000D    height  100   x000D    text-align  center  x000D    x000D   middle   x000D    display  table-cell  x000D    vertical-align  middle  x000D    x000D   inner   x000D    text-align  center  x000D    display  inline-block  x000D    width  auto  x000D    x000D   lt div class  outer  gt  x000D     lt div class  middle  gt  x000D       lt div class  inner  gt  x000D        Content x000D       lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

The answer from Billbad only works with a fixed width of the  inner div  This solution works for a dynamic width by adding the attribute text-align  center to the  outer div    x000D   x000D   outer   x000D    position  absolute  x000D    display  table  x000D    width  100   x000D    height  100   x000D    text-align  center  x000D    x000D   middle   x000D    display  table-cell  x000D    vertical-align  middle  x000D    x000D   inner   x000D    text-align  center  x000D    display  inline-block  x000D    width  auto  x000D    x000D   lt div class  outer  gt  x000D     lt div class  middle  gt  x000D       lt div class  inner  gt  x000D        Content x000D       lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

If someone cares for Internet nbsp Explorer nbsp 10  and later  only  use flexbox    x000D   x000D   parent   x000D      width  500px  x000D      height  500px  x000D      background  yellow  x000D   x000D      display  -webkit-flex  x000D      display  -ms-flexbox  x000D      display  flex  x000D   x000D      -webkit-justify-content  center  x000D      -ms-flex-pack  center  x000D      justify-content  center  x000D   x000D      -webkit-align-items  center  x000D      -ms-flex-align  center  x000D      align-items  center  x000D    x000D   x000D   centered   x000D      width  100px  x000D      height  100px  x000D      background  blue  x000D    x000D   lt div class  parent  gt  x000D       lt div class  centered  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Flexbox support  http   caniuse com flexbox

User · Answer

To vertical-align a box in web page  including Internet nbsp Explorer nbsp 6  you may use    Conditional comments The haslayout property display  table-value for others  and now flex    Fiddle   x000D   x000D     Internet Explorer 8 and others    x000D   main   x000D    width  500px  x000D    margin  auto  x000D    border  solid  x000D    x000D  html   x000D    height  100   x000D    width  100   x000D    display  table  x000D    x000D  body   x000D    display  table-cell  x000D    vertical-align  middle  x000D    x000D   lt  --  if lte IE 7  gt  x000D   lt style gt     Should be in the  lt head gt     x000D      html  body    ie   x000D          height  100   x000D          text-align  center  x000D          white-space  nowrap  x000D        x000D       ie    main  x000D          display  inline     Used with zoom in case you take a block element instead an inline element    x000D          zoom  1  x000D          vertical-align  middle  x000D          text-align  left  x000D          white-space  normal  x000D        x000D   lt  style gt  x000D   lt b class  ie  gt  lt  b gt  x000D   lt  -- endif -- gt  x000D   lt div class  main  gt  x000D     lt p gt Fill it up with your content  lt  p gt  x000D     lt p gt  lt a href  https   jsfiddle net h8z24s5v embedded result   gt JsFiddle versie lt  a gt  lt  p gt  x000D   lt  div gt  x000D   x000D   x000D    Actually  Internet nbsp Explorer nbsp 7 would bring some trouble here being the only which will strictly apply height  100  on HTML body elements     But  this is past and today and who still minds old versions of Internet nbsp Explorer  table table-cell is just fine  display  flex is promising  and display  grid will show up some day     Another nowdays example via flex    x000D   x000D  html   x000D    display  flex  x000D    min-height  100vh    or height    x000D    x000D   x000D  body   x000D    margin  auto  x000D    x000D   lt div gt Div to be aligned vertically lt  div gt  x000D   x000D   x000D

User · Answer

Especially for parent divs with relative  unknown  height  the centering in the unknown solution works great for me  There are some really nice code examples in the article   It was tested in Chrome  Firefox  Opera  and Internet nbsp Explorer    x000D   x000D     This parent can be any width and height    x000D   block   x000D    text-align  center  x000D    x000D   x000D     The ghost  nudged to maintain perfect centering    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   x000D     The element to be centered  can x000D     also be of any width and height     x000D   centered   x000D    display  inline-block  x000D    vertical-align  middle  x000D    width  300px  x000D    x000D   lt div style  width  400px  height  200px   gt  x000D      lt div class  block  style  height  90   width  100   gt  x000D     lt div class  centered  gt  x000D     lt h1 gt Some text lt  h1 gt  x000D     lt p gt Any other text     lt  p gt  x000D     lt  div gt   x000D      lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Vertical  amp  Horizontal CENTER  HTML   lt div id  dialog  gt Centered Dialog lt  div gt    CSS   dialog       position fixed  top 50   left 50   z-index 99991      width 300px  height 60px      margin-top -150px      half of the width        margin-left -30px     half of the height       Enjoy

User · Answer

Unfortunately     but not surprisingly     the solution is more complicated than one would wish it to be  Also unfortunately  you ll need to use additional divs around the div you want vertically centered   For standards-compliant browsers like Mozilla  Opera  Safari  etc  you need to set the outer div to be displayed as a table and the inner div to be displayed as a table-cell     which can then be vertically centered  For Internet Explorer  you need to position the inner div absolutely within the outer div and then specify the top as 50   The following pages explain this technique well and provide some code samples too    Vertical Centering in CSS Vertical Centering in CSS with Unknown Height  Internet nbsp Explorer nbsp 7 compatible   no longer live  Vertical Centering in CSS with Unknown Height  Internet nbsp Explorer nbsp 7 compatible   Archived article courtesy of the Wayback Machine    There is also a technique to do the vertical centering using JavaScript  Vertical alignment of content with JavaScript  amp  CSS demonstrates it

User · Answer

A modern way to center an element vertically would be to use flexbox   You need a parent to decide the height and a child to center   The example below will center a div to the center within your browser  What s important  in my example  is to set height  100  to body and html and then min-height  100  to your container    x000D   x000D  body  html   x000D    background   F5F5F5  x000D    box-sizing  border-box  x000D    height  100   x000D    margin  0  x000D    x000D   x000D   center container   x000D    align-items  center  x000D    display  flex  x000D    min-height  100   x000D    x000D   x000D   center   x000D    background  white  x000D    margin  0 auto  x000D    padding  10px  x000D    text-align  center  x000D    width  200px  x000D    x000D   lt div id  center container  gt  x000D     lt div id  center  gt I am center  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Declare this Mixin    mixin vertical-align  position  relative      position   position    top  50     -webkit-transform  translateY -50      -ms-transform  translateY -50      transform  translateY -50        Then include it in your element    element       include vertical-align

User · Answer

The following is working in my case and was tested in Firefox    element       display  block      transform  translateY 50        -moz-transform  translateY 50        -webkit-transform  translateY 50        -ms-transform  translateY 50        The div s height and parent s height are dynamic  I use it when there are other elements on the same parent which is higher than the target element  where both are positioned horizontally inline

User · Answer

One more I can t see on the list    Center-Container     position  relative    height  100       Absolute-Center     width  50     height  50     overflow  auto    margin  auto    position  absolute    top  0  left  0  bottom  0  right  0    border  solid black       Cross-browser  including Internet nbsp Explorer nbsp 8 - Internet nbsp Explorer nbsp 10 without hacks   Responsive with percentages and min- max- Centered regardless of padding  without box-sizing   height must be declared  see Variable Height  Recommended setting overflow  auto to prevent content spillover  see Overflow    Source  Absolute Horizontal And Vertical Centering In CSS

User · Answer

I think a solid solution for all browsers without using flexbox -  align-items  center   is a combination of display  table and vertical-align  middle    CSS   vertically-center       display  table       width  100       optional        height  100      optional        vertically-center  gt  div       display  table-cell      vertical-align  middle      HTML   lt div class  vertically-center  gt       lt div gt           lt div style  border  1px solid black   gt some text lt  div gt       lt  div gt   lt  div gt      8227 demo  https   jsfiddle net 6m640rpp

User · Answer

I did it with this  change width  height  margin-top and margin-left accordingly     wrapper       width 960px      height 590px      position absolute      top 50       left 50       margin-top -295px      margin-left -480px      lt div class  wrapper  gt  -- Content --  lt  div gt

User · Answer

The easiest solution is below    x000D   x000D   outer-div  x000D    width  100   x000D    height  200px  x000D    display  flex  x000D    border 1px solid  000  x000D    x000D   inner-div  x000D    margin  auto  x000D    text-align center  x000D    border 1px solid red  x000D    x000D   lt div class  outer-div  gt  x000D     lt div class  inner-div  gt  x000D      Hey there  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Centering only vertically If you don t care about Internet Explorer 6 and 7  you can use a technique that involves two containers  The outer container   should have display  table   The inner container   should have display  table-cell  should have vertical-align  middle   The content box   should have display  inline-block   You can add any content you want to the content box without caring about its width or height  Demo   x000D   x000D  body       margin  0      outer-container       position  absolute      display  table      width  100      This could be ANY width        height  100      This could be ANY height        background   ccc      inner-container       display  table-cell      vertical-align  middle      centered-content       display  inline-block      background   fff      padding  20px      border  1px solid  000    x000D   lt div class  outer-container  gt      lt div class  inner-container  gt        lt div class  centered-content  gt          Malcolm in the Middle       lt  div gt      lt  div gt   lt  div gt  x000D   x000D   x000D   See also this Fiddle   Centering horizontally and vertically If you want to center both horizontally and vertically  you also need the following  The inner container   should have text-align  center   The content box   should re-adjust the horizontal text-alignment to for example text-align  left  or text-align  right   unless you want text to be centered  Demo   x000D   x000D  body       margin  0      outer-container       position  absolute      display  table      width  100      This could be ANY width        height  100      This could be ANY height        background   ccc      inner-container       display  table-cell      vertical-align  middle      text-align  center      centered-content       display  inline-block      text-align  left      background   fff      padding  20px      border  1px solid  000    x000D   lt div class  outer-container  gt      lt div class  inner-container  gt        lt div class  centered-content  gt           Malcolm in the Middle       lt  div gt      lt  div gt   lt  div gt  x000D   x000D   x000D   See also this Fiddle

User · Answer

Using flex property of CSS    x000D   x000D   parent   x000D      width  400px  x000D      height 200px  x000D      background  blue  x000D      display  flex  x000D      align-items  center  x000D      justify-content center  x000D    x000D   x000D   child   x000D      width  75px  x000D      height  75px  x000D      background  yellow  x000D    x000D   lt div class  parent  gt  x000D       lt div class  child  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    or by using display  flex  and margin  auto    x000D   x000D   parent   x000D      width  400px  x000D      height 200px  x000D      background  blue  x000D      display  flex  x000D    x000D   x000D   child   x000D      width  75px  x000D      height  75px  x000D      background  yellow  x000D      margin auto  x000D    x000D   lt div class  parent  gt  x000D       lt div class  child  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    show text center   x000D   x000D   parent   x000D      width  400px  x000D      height  200px  x000D      background  yellow  x000D      display  flex  x000D      align-items  center  x000D      justify-content center  x000D    x000D   lt div class  parent  gt Center lt  div gt  x000D   x000D   x000D    Using percentage    height and width   x000D   x000D   parent   x000D      position  absolute  x000D      height 100   x000D      width 100   x000D      background  blue  x000D      display  flex  x000D      align-items  center  x000D      justify-content center  x000D    x000D   x000D   child   x000D      width  75px  x000D      height  75px  x000D      background  yellow  x000D    x000D   lt div class  parent  gt  x000D       lt div class  child  gt  lt  div gt  x000D   lt  div gt   x000D   x000D   x000D

User · Answer

Here is a simple way  with almost no code   CSS code    main      height  100       center      top  50       margin-top  50       HTML code    lt div class  main  gt       lt div class  center  gt          Hi  I am centered       lt  div gt   lt  div gt    Your text will be in the middle of the page

User · Answer

Unfortunately     but not surprisingly     the solution is more complicated than one would wish it to be  Also unfortunately  you ll need to use additional divs around the div you want vertically centered   For standards-compliant browsers like Mozilla  Opera  Safari  etc  you need to set the outer div to be displayed as a table and the inner div to be displayed as a table-cell     which can then be vertically centered  For Internet Explorer  you need to position the inner div absolutely within the outer div and then specify the top as 50   The following pages explain this technique well and provide some code samples too    Vertical Centering in CSS Vertical Centering in CSS with Unknown Height  Internet nbsp Explorer nbsp 7 compatible   no longer live  Vertical Centering in CSS with Unknown Height  Internet nbsp Explorer nbsp 7 compatible   Archived article courtesy of the Wayback Machine    There is also a technique to do the vertical centering using JavaScript  Vertical alignment of content with JavaScript  amp  CSS demonstrates it

User · Answer

I just wrote this CSS and to know more  please go through  This article with vertical align anything with just 3 lines of CSS    element       position  relative      top  50       transform  perspective 1px  translateY -50

User · Answer

The three lines of code using transform works practically on modern browsers and Internet nbsp Explorer    element       position  relative       top  50        transform  translateY -50         -moz-transform  translateY -50         -webkit-transform  translateY -50         -ms-transform  translateY -50        I am adding this answer since I found some incompleteness in the previous version of this answer  and Stack Overflow won t allow me to simply comment      position  relative messes up the styling if the current div is in the body and has no container div  However  fixed  seems to work  but it obviously fixes the content in the center of the viewport  Also I used this styling for centering some overlay divs and found that in Mozilla all elements inside this transformed div had lost their bottom borders  Possibly a rendering issue  But adding just the minimal padding to some of them rendered it correctly  Chrome and Internet nbsp Explorer  surprisingly  rendered the boxes without any need for padding

User · Answer

For new comers please try   display  flex  align-items  center  justify-content  center

User · Answer

If someone cares for Internet nbsp Explorer nbsp 10  and later  only  use flexbox    x000D   x000D   parent   x000D      width  500px  x000D      height  500px  x000D      background  yellow  x000D   x000D      display  -webkit-flex  x000D      display  -ms-flexbox  x000D      display  flex  x000D   x000D      -webkit-justify-content  center  x000D      -ms-flex-pack  center  x000D      justify-content  center  x000D   x000D      -webkit-align-items  center  x000D      -ms-flex-align  center  x000D      align-items  center  x000D    x000D   x000D   centered   x000D      width  100px  x000D      height  100px  x000D      background  blue  x000D    x000D   lt div class  parent  gt  x000D       lt div class  centered  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Flexbox support  http   caniuse com flexbox

User · Answer

CSS Grid   x000D   x000D  body  html   margin  0    x000D   x000D  body   x000D    display  grid  x000D    min-height  100vh  x000D    align-items  center  x000D    x000D   lt div gt Div to be aligned vertically lt  div gt  x000D   x000D   x000D

User · Answer

CSS Grid   x000D   x000D  body  html   margin  0    x000D   x000D  body   x000D    display  grid  x000D    min-height  100vh  x000D    align-items  center  x000D    x000D   lt div gt Div to be aligned vertically lt  div gt  x000D   x000D   x000D

User · Answer

To vertical-align a box in web page  including Internet nbsp Explorer nbsp 6  you may use    Conditional comments The haslayout property display  table-value for others  and now flex    Fiddle   x000D   x000D     Internet Explorer 8 and others    x000D   main   x000D    width  500px  x000D    margin  auto  x000D    border  solid  x000D    x000D  html   x000D    height  100   x000D    width  100   x000D    display  table  x000D    x000D  body   x000D    display  table-cell  x000D    vertical-align  middle  x000D    x000D   lt  --  if lte IE 7  gt  x000D   lt style gt     Should be in the  lt head gt     x000D      html  body    ie   x000D          height  100   x000D          text-align  center  x000D          white-space  nowrap  x000D        x000D       ie    main  x000D          display  inline     Used with zoom in case you take a block element instead an inline element    x000D          zoom  1  x000D          vertical-align  middle  x000D          text-align  left  x000D          white-space  normal  x000D        x000D   lt  style gt  x000D   lt b class  ie  gt  lt  b gt  x000D   lt  -- endif -- gt  x000D   lt div class  main  gt  x000D     lt p gt Fill it up with your content  lt  p gt  x000D     lt p gt  lt a href  https   jsfiddle net h8z24s5v embedded result   gt JsFiddle versie lt  a gt  lt  p gt  x000D   lt  div gt  x000D   x000D   x000D    Actually  Internet nbsp Explorer nbsp 7 would bring some trouble here being the only which will strictly apply height  100  on HTML body elements     But  this is past and today and who still minds old versions of Internet nbsp Explorer  table table-cell is just fine  display  flex is promising  and display  grid will show up some day     Another nowdays example via flex    x000D   x000D  html   x000D    display  flex  x000D    min-height  100vh    or height    x000D    x000D   x000D  body   x000D    margin  auto  x000D    x000D   lt div gt Div to be aligned vertically lt  div gt  x000D   x000D   x000D

User · Answer

I just found another way which worked for me    lt div class  container  gt     lt div class  vertical  gt        lt h1 gt Welcome lt  h1 gt        lt h2 gt Aligned Vertically lt  h2 gt        lt a href     gt Click ME lt  a gt      lt  div gt   lt  div gt    CSS   vertical    top  50     -webkit-transform  translateY -50      -ms-transform  translateY -50      transform  translateY -50        More information

User · Answer

The following link presents a simple way of doing it with just 3 lines in your CSS    Vertical align anything with just 3 lines of CSS      Credits to  Sebastian Ekstr  m    I know the question has already an answer however I saw utility in the link for its simplicity

User · Answer

The following link presents a simple way of doing it with just 3 lines in your CSS    Vertical align anything with just 3 lines of CSS      Credits to  Sebastian Ekstr  m    I know the question has already an answer however I saw utility in the link for its simplicity

User · Answer

To center the div on a page  check the fiddle link    x000D   x000D   vh   x000D      margin  auto  x000D      position  absolute  x000D      top  0  x000D      left  0  x000D      bottom  0  x000D      right  0  x000D    x000D   box  x000D      border-radius  15px  x000D      box-shadow  0 0 8px rgba 0  0  0  0 4   x000D      padding  25px  x000D      width  100px  x000D      height  100px  x000D      background  white  x000D    x000D   lt div id  vh  class  box  gt Div to be aligned vertically lt  div gt  x000D   x000D   x000D    Another option is to use flex box  check the fiddle link    x000D   x000D   vh   x000D      background-color   ddd  x000D      height  400px  x000D      align-items  center  x000D      display  flex  x000D    x000D   vh  gt  div   x000D      width  100   x000D      text-align  center  x000D      vertical-align  middle  x000D    x000D   lt div class  vh  gt  x000D       lt div gt Div to be aligned vertically lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Another option is to use a CSS 3 transform    x000D   x000D   vh   x000D      position  absolute  x000D      top  50   x000D      left  50   x000D        transform  translateX -50   translateY -50      x000D      transform  translate -50   -50    x000D    x000D   box  x000D      border-radius  15px  x000D      box-shadow  0 0 8px rgba 0  0  0  0 4   x000D      padding  25px  x000D      width  100px  x000D      height  100px  x000D      background  white  x000D    x000D   lt div id  vh  class  box  gt Div to be aligned vertically lt  div gt  x000D   x000D   x000D

User · Answer

Especially for parent divs with relative  unknown  height  the centering in the unknown solution works great for me  There are some really nice code examples in the article   It was tested in Chrome  Firefox  Opera  and Internet nbsp Explorer    x000D   x000D     This parent can be any width and height    x000D   block   x000D    text-align  center  x000D    x000D   x000D     The ghost  nudged to maintain perfect centering    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   x000D     The element to be centered  can x000D     also be of any width and height     x000D   centered   x000D    display  inline-block  x000D    vertical-align  middle  x000D    width  300px  x000D    x000D   lt div style  width  400px  height  200px   gt  x000D      lt div class  block  style  height  90   width  100   gt  x000D     lt div class  centered  gt  x000D     lt h1 gt Some text lt  h1 gt  x000D     lt p gt Any other text     lt  p gt  x000D     lt  div gt   x000D      lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

The contents can be easily centered by using flexbox  The following code shows the CSS for the container inside which the contents needs to be centered    absolute-center       display  -ms-flexbox      display  -webkit-flex      display  flex       -ms-flex-align  center      -webkit-align-items  center      -webkit-box-align  center       align-items  center

User · Answer

Actually you need two div s for vertical centering  The div containing the content must have a width and height    x000D   x000D   container   x000D    position  absolute  x000D    top  50   x000D    margin-top  -200px  x000D       half of  content height   x000D    left  0  x000D    width  100   x000D    x000D   x000D   content   x000D    width  624px  x000D    margin-left  auto  x000D    margin-right  auto  x000D    height  395px  x000D    border  1px solid  000000  x000D    x000D   lt div id  container  gt  x000D     lt div id  content  gt  x000D       lt h1 gt Centered div lt  h1 gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Here is the result

User · Answer

I use this  It works in Internet nbsp Explorer nbsp 8 and later   height 268px - for display table acts like min-height   CSS         padding  0    margin  0    body     background   cc9999    p     background   f0ad4e     all     margin  200px auto     ff-valign-wrap     display  table    width  100     height  268px    background   ff00ff     ff-valign     display  table-cell    height  100     vertical-align  middle    text-align  center    background   ffff00      HTML    lt body gt      lt div id  all  gt       lt div class  ff-valign-wrap  gt         lt div class  ff-valign  gt           lt p gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Amet  animi autem doloribus earum expedita  ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates  lt  p gt           lt p gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Amet  animi autem doloribus earum expedita  ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates  lt  p gt           lt p gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Amet  animi autem doloribus earum expedita  ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates  lt  p gt           lt p gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Amet  animi autem doloribus earum expedita  ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates  lt  p gt           lt p gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Amet  animi autem doloribus earum expedita  ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates  lt  p gt           lt p gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Amet  animi autem doloribus earum expedita  ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates  lt  p gt           lt p gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Amet  animi autem doloribus earum expedita  ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates  lt  p gt         lt  div gt       lt  div gt     lt  div gt    lt  body gt

User · Answer

Actually you need two div s for vertical centering  The div containing the content must have a width and height    x000D   x000D   container   x000D    position  absolute  x000D    top  50   x000D    margin-top  -200px  x000D       half of  content height   x000D    left  0  x000D    width  100   x000D    x000D   x000D   content   x000D    width  624px  x000D    margin-left  auto  x000D    margin-right  auto  x000D    height  395px  x000D    border  1px solid  000000  x000D    x000D   lt div id  container  gt  x000D     lt div id  content  gt  x000D       lt h1 gt Centered div lt  h1 gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Here is the result

User · Answer

This method doesn t use any transform  So it doesn t have a problem with the output becoming blurry   position  absolute  width  100vw  top  25   bottom  25   text-align  center

User · Answer

I just found another way which worked for me    lt div class  container  gt     lt div class  vertical  gt        lt h1 gt Welcome lt  h1 gt        lt h2 gt Aligned Vertically lt  h2 gt        lt a href     gt Click ME lt  a gt      lt  div gt   lt  div gt    CSS   vertical    top  50     -webkit-transform  translateY -50      -ms-transform  translateY -50      transform  translateY -50        More information

User · Answer

This is by far the easiest approach  works on non-blocking elements as well  the only downside is  it s Flexbox  thus  older browsers will not support this    lt div class  sweet-overlay  gt       lt img class  centered  src  http   jimpunk com Loading loading83 gif    gt   lt  div gt    Link to codepen   http   codepen io damianocel pen LNOdRp  The important point here is  for vertical centering  we need to define a parent element  container  and the img must have a smaller height than the parent element

User · Answer

Here is a simple way  with almost no code   CSS code    main      height  100       center      top  50       margin-top  50       HTML code    lt div class  main  gt       lt div class  center  gt          Hi  I am centered       lt  div gt   lt  div gt    Your text will be in the middle of the page

User · Answer

After a lot of research I finally found the ultimate solution  It works even for floated elements  View Source    element       position  relative      top  50       transform  translateY -50       or try 50

User · Answer

Now the flexbox solution is a very easy way for modern browsers, so I recommend this for you:

_x000D_

.container{_x000D_
    display: flex;_x000D_
    align-items: center;_x000D_
    justify-content: center;_x000D_
    height: 100%;_x000D_
    background:green;_x000D_
}_x000D_
_x000D_
body, html{_x000D_
  height:100%;_x000D_
}

_x000D_

<div class="container">_x000D_
    <div>Div to be aligned vertically</div>_x000D_
</div>

_x000D_

User · Answer

The simplest way would be the following 3 lines of CSS   1  position  relative   2  top  50    3  transform  translateY -50     Following is an EXAMPLE    x000D   x000D  div outer-div   x000D    height  170px  x000D    width  300px  x000D    background-color  lightgray  x000D    x000D   x000D  div middle-div   x000D    position  relative  x000D    top  50   x000D    -webkit-transform  translateY -50    x000D    -ms-transform  translateY -50    x000D    transform  translateY -50    x000D    x000D   lt div class  outer-div  gt  x000D     lt div class  middle-div  gt  x000D      Test text x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

This solution worked for me if you have a block element  e  g     I used the colors to make the solution clearer   HTML    lt main class  skin orange  gt   lt p gt As you can the the element box is vertically centered lt  p gt   lt div class  bigBox skin blue  gt Blue Box lt  div gt   lt  main gt    CSS   main       position  relative      width  400px      height  400px      skin orange       outline  thin dotted red      background  orange      bigBox       width  150px      height  150px      position  absolute      top  50       transform  translateY -50        skin blue       background-color  blue        JSFiddle Code Demo

User · Answer

I think a solid solution for all browsers without using flexbox -  align-items  center   is a combination of display  table and vertical-align  middle    CSS   vertically-center       display  table       width  100       optional        height  100      optional        vertically-center  gt  div       display  table-cell      vertical-align  middle      HTML   lt div class  vertically-center  gt       lt div gt           lt div style  border  1px solid black   gt some text lt  div gt       lt  div gt   lt  div gt      8227 demo  https   jsfiddle net 6m640rpp

User · Answer

The best thing to do would be    vertalign    height  300px    width  300px    position  absolute    top  calc 50vh - 150px        150 pixels because that s half of the div s height in this case

User · Answer

Edit 2020   only use this if you need to support old browsers like IE8  which you should refuse to do    If not  use flexbox     This is the simplest method I found and I use it all the time  jsFiddle demo here   Thank Chris Coyier from CSS Tricks for this article    x000D   x000D  html  body  x000D    height  100   x000D    margin  0  x000D    x000D   v-wrap  x000D      height  100   x000D      white-space  nowrap  x000D      text-align  center  x000D    x000D   v-wrap before  x000D      content      x000D      display  inline-block  x000D      vertical-align  middle  x000D      width  0  x000D         adjust for white space between pseudo element and next sibling    x000D      margin-right  - 25em  x000D         stretch line height    x000D      height  100    x000D    x000D   v-box  x000D      display  inline-block  x000D      vertical-align  middle  x000D      white-space  normal  x000D    x000D   lt div class  v-wrap  gt  x000D       lt article class  v-box  gt  x000D           lt p gt This is how I ve been doing it for some time lt  p gt  x000D       lt  article gt  x000D   lt  div gt  x000D   x000D   x000D    Support starts with IE8

User · Answer

I use this  It works in Internet nbsp Explorer nbsp 8 and later   height 268px - for display table acts like min-height   CSS         padding  0    margin  0    body     background   cc9999    p     background   f0ad4e     all     margin  200px auto     ff-valign-wrap     display  table    width  100     height  268px    background   ff00ff     ff-valign     display  table-cell    height  100     vertical-align  middle    text-align  center    background   ffff00      HTML    lt body gt      lt div id  all  gt       lt div class  ff-valign-wrap  gt         lt div class  ff-valign  gt           lt p gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Amet  animi autem doloribus earum expedita  ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates  lt  p gt           lt p gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Amet  animi autem doloribus earum expedita  ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates  lt  p gt           lt p gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Amet  animi autem doloribus earum expedita  ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates  lt  p gt           lt p gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Amet  animi autem doloribus earum expedita  ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates  lt  p gt           lt p gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Amet  animi autem doloribus earum expedita  ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates  lt  p gt           lt p gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Amet  animi autem doloribus earum expedita  ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates  lt  p gt           lt p gt Lorem ipsum dolor sit amet  consectetur adipisicing elit  Amet  animi autem doloribus earum expedita  ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates  lt  p gt         lt  div gt       lt  div gt     lt  div gt    lt  body gt

User · Answer

Since each time I need to center div vertically I google for it over and over again and this answer always comes first I ll leave this for future me  since none of the provided solutions fit my need well    So if one is already using bootstrap this can be done as below    lt div style  min-height  100vh   class  align-items-center row  gt       lt div class  col  style  margin  auto  max-width  750px   gt    optional style to center horizontally as well        content goes here       lt  div gt   lt  div gt

User · Answer

By using the transform property we can do a vertically centered div easily    x000D   x000D   main-div   x000D      background  none repeat scroll 0 0  999  x000D      font-size  18px  x000D      height  450px  x000D      max-width  850px  x000D      padding  15px  x000D    x000D   x000D   vertical-center   x000D      background  none repeat scroll 0 0  1FA67A  x000D      color   FFFFFF  x000D      padding  15px  x000D      position  relative  x000D      top  50   x000D      transform  translateY -50    x000D      -moz-transform  translateY -50    x000D      -webkit-transform  translateY -50    x000D      -ms-transform  translateY -50    x000D      -o-transform  translateY -50    x000D    x000D   lt div class  main-div  gt  x000D       lt div class  vertical-center  gt  x000D           lt span gt  Lorem ipsum dolor sit amet  consectetur adipiscing elit  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua  Ut enim ad minim veniam  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur  Excepteur sint occaecat cupidatat non proident  sunt in culpa qui officia deserunt mollit anim id est laborum   lt  span gt  x000D       lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    See here for full article

User · Answer

Since each time I need to center div vertically I google for it over and over again and this answer always comes first I ll leave this for future me  since none of the provided solutions fit my need well    So if one is already using bootstrap this can be done as below    lt div style  min-height  100vh   class  align-items-center row  gt       lt div class  col  style  margin  auto  max-width  750px   gt    optional style to center horizontally as well        content goes here       lt  div gt   lt  div gt

User · Answer

Actually you need two div s for vertical centering  The div containing the content must have a width and height    x000D   x000D   container   x000D    position  absolute  x000D    top  50   x000D    margin-top  -200px  x000D       half of  content height   x000D    left  0  x000D    width  100   x000D    x000D   x000D   content   x000D    width  624px  x000D    margin-left  auto  x000D    margin-right  auto  x000D    height  395px  x000D    border  1px solid  000000  x000D    x000D   lt div id  container  gt  x000D     lt div id  content  gt  x000D       lt h1 gt Centered div lt  h1 gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Here is the result

User · Answer

I find this one most useful   it gives the most accurate  H  layout and is very simple to understand   The benefit in this markup is that you define your content size in a single place -   PageContent    The Colors of the page background and its horizontal margins are defined in their corresponding divs    lt div id  PageLayoutConfiguration        style  display  table       position absolute  top  0px  right  0px  bottom  0px  left  0px       width  100   height  100    gt            lt div id  PageBackground                style  display  table-cell  vertical-align  middle               background-color  purple   gt                lt div id  PageHorizontalMargins                   style  width  100                    background-color  seashell   gt                    lt div id  PageContent                        style  width  1200px  height  620px  margin  0 auto                       background-color  grey   gt                        my content goes here                      lt  div gt               lt  div gt           lt  div gt       lt  div gt    And here with CSS separated    lt div id  PageLayoutConfiguration  gt        lt div id  PageBackground  gt             lt div id  PageHorizontalMargins  gt                  lt div id  PageContent  gt                       my content goes here                    lt  div gt             lt  div gt        lt  div gt   lt  div gt    PageLayoutConfiguration     display  table  width  100   height  100      position absolute  top  0px  right  0px  bottom  0px  left  0px      PageBackground     display  table-cell  vertical-align  middle     background-color  purple      PageHorizontalMargins     style  width  100      background-color  seashell     PageContent     width  1200px  height  620px  margin  0 auto     background-color  grey

[css] How to vertically center a "div" element for all browsers using CSS?

Examples related to css

Examples related to cross-browser

Examples related to alignment

Examples related to vertical-alignment

Examples related to centering