使用 margin:auto 垂直对齐 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?

 .black { position:absolute; top:0; bottom:0; left:0; right:0; background:rgba(0,0,0,.5); } .message { background:yellow; width:200px; margin:auto auto; padding:10px; }

 <div class="black"> <div class="message"> This is a popup message. </div> </div>

JSFiddle

Answer 1

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:

 .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; }

 <div class="container"> <div class="helper"> <div class="content"> <p>stuff</p> </div> </div> </div

JSFiddle works fine according to Browsershot.

Answer 2

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.

 #parent { width: 50vw; height: 50vh; background-color: gray; display: flex; } #child { margin: auto auto; }

 <div id="parent"> <div id="child">hello world</div> </div>

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:

 #parent { width: 50vw; height: 50vh; background-color: gray; display: flex; align-items: center; /* vertical */ justify-content: center; /* horizontal */ }

 <div id="parent"> <div>hello world</div> </div>

Answer 3

Here's the best solution I've found: http://jsfiddle.net/yWnZ2/446/ Works in Chrome, Firefox, Safari, IE8-11 & 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

Answer 4

Edit: it's 2020, I would use flex box instead.

Original answer:

Html

<body>
  <div class="centered">
  </div>
</body>

CSS

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

Answer 5

I know the question is from 2012, but I found the easiest way ever, and I wanted to share.

HTML:

<div id="parent">
     <div id="child">Content here</div>
</div>

and CSS:

#parent{
     height: 100%;
     display: table;
}    
#child {
     display: table-cell;
     vertical-align: middle; 
}

Answer 6

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, ie 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:

 .black { position:absolute; top:0; bottom:0; left:0; right:0; background:rgba(0,0,0,.5); } .message { background:yellow; width:200px; margin:auto auto; padding:10px; position: absolute; top: 50%; margin-top: -25px; height: 50px; }

 <div class="black"> <div class="message"> This is a popup message. </div> </div>

http://jsfiddle.net/yWnZ2/2/

Answer 7

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.

Answer 8

 .black { display:flex; flex-direction: column; height: 200px; background:grey } .message { background:yellow; width:200px; padding:10px; margin: auto auto; }

 <div class="black"> <div class="message"> This is a popup message. </div> </div>

Answer 9

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"

Answer 10

Using Flexbox:

HTML:

<div class="container">
  <img src="http://lorempixel.com/400/200" />
</div>

CSS:

.container {
  height: 500px;
  display: flex;
  justify-content: center; /* horizontal center */
  align-items: center;     /* vertical center */
}

View result

Answer 11

variable height ,margin top and bottom auto

 .black {background:rgba(0,0,0,.5); width: 300px; height: 100px; display: -webkit-flex; /* Safari */ display: flex;} .message{ background:tomato; margin:auto; padding:5%; width:auto; }

 <div class="black"> <div class="message"> This is a popup message. </div>

variable height ,margin top and bottom auto

Answer 12

I think you can fix that with Flexbox

 .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; }

 <div class="black"> <div class="message"> This is a popup message. </div> </div>

Answer 13

 .black { position:absolute; /* Replace with a one line inset property. top:0; bottom:0; left:0; right:0; */ inset: 0; background:rgba(0,0,0,.5); /* Since no one has mentioned it yet, here it is the grid display and the place-content property. */ display:grid; place-content: center; } .message { background:yellow; width:200px; /* There's no point here. margin:auto auto; */ padding:10px; }

 <div class="black"> <div class="message"> This is a popup message. </div> </div>

Answer 14

<div style="display:flex">
  <img src="" style="display:block !important; margin:auto">
</div>

To center an image in a div horizontally and vertically

Answer 15

.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;
}

 - 


----------


<div class="black">
<div class="message">
    This is a popup message.
</div>