Using margin auto to vertically-align a div

Question

So I know we can center a div horizontally if we use margin 0 auto   Should margin auto auto  work how I think it should work  Centering it vertically as well    Why doesn t vertical-align middle  work either    x000D   x000D   black   x000D      position absolute  x000D      top 0  x000D      bottom 0  x000D      left 0  x000D      right 0  x000D      background rgba 0 0 0  5   x000D    x000D   message   x000D      background yellow  x000D      width 200px  x000D      margin auto auto  x000D      padding 10px  x000D    x000D   lt div class  black  gt  x000D       lt div class  message  gt  x000D          This is a popup message  x000D       lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    JSFiddle

User · Answer

Those two solution require only two nested elements.
First - Relative and absolute positioning if the content is static (manual center).

.black {
    position:relative;
    min-height:500px;
    background:rgba(0,0,0,.5);

}
.message {
    position:absolute;
    margin: 0 auto;
    width: 180px;
    top: 45%; bottom:45%;  left: 0%; right: 0%;
}

https://jsfiddle.net/GlupiJas/5mv3j171/

or for fluid design - for exact content center use below example instead:

.message {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

https://jsfiddle.net/GlupiJas/w3jnjuv0/

You need 'min-height' set in case the content will exceed 50% of window height. You can also manipulate this height with media query for mobile and tablet devices . But only if You play with responsive design.

I guess You could go further and use simple JavaScript/JQuery script to manipulate the min-height or fixed height if there is a need for some reason.

Second - if content is fluid u can also use table and table-cell css properties with vertical alignment and text-align centered:

/*in a wrapper*/  
display:table;

and

/*in the element inside the wrapper*/
display:table-cell;
vertical-align: middle;
text-align: center;

Works and scale perfectly, often used as responsive web design solution with grid layouts and media query that manipulate the width of the object.

.black {
    display:table;
    height:500px;
    width:100%;
    background:rgba(0,0,0,.5);

}
.message {
    display:table-cell;
    vertical-align: middle;
    text-align: center;
}

https://jsfiddle.net/GlupiJas/4daf2v36/

I prefer table solution for exact content centering, but in some cases relative absolute positioning will do better job especially if we don't want to keep exact proportion of content alignment.

User · Answer

Update Aug 2020 Although the below is still worth reading for the useful info  we have had Flexbox for some time now  so just use that  as per this answer   You can t use  vertical-align middle because it s not applicable to block-level elements margin-top auto and margin-bottom auto because their used values would compute as zero margin-top -50  because percentage-based margin values are calculated relative to the width of containing block  In fact  the nature of document flow and element height calculation algorithms make it impossible to use margins for centering an element vertically inside its parent  Whenever a vertical margin s value is changed  it will trigger a parent element height re-calculation  re-flow   which would in turn trigger a re-center of the original element    making it an infinite loop  You can use  A few workarounds like this which work for your scenario  the three elements have to be nested like so   x000D   x000D   container       display  table      height  100       position  absolute      overflow  hidden      width  100      helper        position  absolute       top  50       display  table-cell      vertical-align  middle     content        position  relative       top  -50       margin  0 auto      width  200px      border  1px solid orange    x000D   lt div class  container  gt       lt div class  helper  gt           lt div class  content  gt               lt p gt stuff lt  p gt           lt  div gt       lt  div gt   lt  div x000D   x000D   x000D   JSFiddle works fine according to Browsershot

User · Answer

Here s the best solution I ve found  http   jsfiddle net yWnZ2 446  Works in Chrome  Firefox  Safari  IE8-11  amp  Edge   If you have a declared height  height  1em  height  50   etc   or it s an element where the browser knows the height  img  svg  or canvas for example   then all you need for vertical centering is this    message       position  absolute      top  0  bottom  0  left  0  right  0      margin  auto      You ll usually want to specify a width or max-width so the content doesn t stretch the whole length of the screen container   If you re using this for a modal that you want always centered in the viewport overlapping other content  use position  fixed  for both elements instead of position  absolute  http   jsfiddle net yWnZ2 445   Here s a more complete writeup  http   codepen io shshaw pen gEiDt

User · Answer

x000D   x000D   black   x000D      display flex  x000D      flex-direction  column  x000D      height  200px  x000D      background grey x000D    x000D   message   x000D      background yellow  x000D      width 200px  x000D      padding 10px  x000D      margin  auto auto  x000D    x000D   lt div class  black  gt  x000D       lt div class  message  gt  x000D          This is a popup message  x000D       lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

variable height  margin top and bottom auto   x000D   x000D   black  background rgba 0 0 0  5   x000D  width  300px  x000D  height  100px  x000D  display  -webkit-flex     Safari    x000D  display  flex   x000D   message  x000D  background tomato  x000D  margin auto  x000D  padding 5   x000D  width auto  x000D    x000D   lt div class  black  gt  x000D   lt div class  message  gt  x000D      This is a popup message  x000D   lt  div gt  x000D   x000D   x000D    variable height  margin top and bottom auto

User · Answer

black       position absolute      top 0      bottom 0      left 0      right 0      background rgba 0 0 0  5      message       position  absolute      top 50       left  50       transform  translate -50   -50        background yellow      width 200px      padding 10px      -    ----------    lt div class  black  gt   lt div class  message  gt      This is a popup message   lt  div gt

User · Answer

Edit  it s 2020  I would use flex box instead   Original answer   Html   lt body gt     lt div class  centered  gt     lt  div gt   lt  body gt    CSS   centered     position  absolute    top  50     left  50     transform  translate -50   -50

User · Answer

I know the question is from 2012  but I found the easiest way ever  and I wanted to share   HTML    lt div id  parent  gt        lt div id  child  gt Content here lt  div gt   lt  div gt    and CSS    parent       height  100        display  table         child        display  table-cell       vertical-align  middle

User · Answer

I think you can fix that with Flexbox  x000D   x000D   black     height   200px    width   200px    background-color   teal    border  5px solid rgb 0  53  53        This is the important part      display   flex    justify-content  center    align-items  center      message     background-color    rgb 119  128  0     border  5px solid rgb 0  53  53     height   50     width   50     padding   5px    x000D   lt div class  black  gt       lt div class  message  gt          This is a popup message       lt  div gt   lt  div gt  x000D   x000D   x000D

User · Answer

Using Flexbox   HTML    lt div class  container  gt     lt img src  http   lorempixel com 400 200    gt   lt  div gt    CSS    container     height  500px    display  flex    justify-content  center     horizontal center      align-items  center         vertical center        View result

User · Answer

If you know the height of the div you want to center  you can position it absolutely within its parent and then set the top value to 50    That will put the top of the child div 50  of the way down its parent  i e  too low   Pull it back up by setting its margin-top to half its height   So now you have the vertical midpoint of the child div sitting at the vertical midpoint of the parent - vertically centered   Example     x000D   x000D   black   x000D      position absolute  x000D      top 0  x000D      bottom 0  x000D      left 0  x000D      right 0  x000D      background rgba 0 0 0  5   x000D    x000D   message   x000D      background yellow  x000D      width 200px  x000D      margin auto auto  x000D      padding 10px  x000D      position  absolute  x000D      top  50   x000D      margin-top  -25px  x000D      height  50px  x000D    x000D   lt div class  black  gt  x000D       lt div class  message  gt  x000D          This is a popup message  x000D       lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    http   jsfiddle net yWnZ2 2

User · Answer

There isn t one easy way to center div vertically which would do the trick in every situation   However  there are lots of ways to do it depending on the situation   Here are few of them    Set top and bottom padding of the parent element for example padding 20px 0px 20px 0px Use table  table cell centers its  content vertically Set parent element s position relative and the div s you want to vertically center to absolute and style it as top 50px  bottom 50px  for example   You may also google for  css vertical centering

User · Answer

Since this question was asked in 2012 and we have come a long way with browser support for flexboxes  I felt as though this answer was obligatory  If the display of your parent container is flex  then yes  margin  auto auto  also known as margin  auto  will work to center it both horizontally and vertically  regardless if it is an inline or block element   x000D   x000D   parent       width  50vw      height  50vh      background-color  gray      display  flex     child       margin  auto auto    x000D   lt div id  parent  gt       lt div id  child  gt hello world lt  div gt   lt  div gt  x000D   x000D   x000D   Note that the width height do not have to be specified absolutely  as in this example jfiddle which uses sizing relative to the viewport  Although browser support for flexboxes is at an all-time high at time of posting  many browsers still do not support it or require vendor prefixes  Refer to http   caniuse com flexbox for updated browser support information  Update Since this answer received a bit of attention  I would also like to point out that you don t need to specify margin at all if you re using display  flex and would like to center all of the elements in the container   x000D   x000D   parent       width  50vw      height  50vh      background-color  gray      display  flex      align-items  center     vertical        justify-content  center     horizontal      x000D   lt div id  parent  gt       lt div gt hello world lt  div gt   lt  div gt  x000D   x000D   x000D

[html] Using margin:auto to vertically-align a div

Examples related to html

Examples related to css

Examples related to centering