Using margin: auto to vertically align a div

Question

Using margin: auto to vertically align a div

Therefore, I know that we can center the div horizontally if we use margin:0 auto; . Should margin:auto auto; work how i think it should work? Centering it vertically?

Why vertical-align:middle; does not work vertical-align:middle; ?

 .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

+68

html css centering

Spencer Avinger Sep 13 '12 at 22:26

source share

11 answers

Here's the best solution I've found: http://jsfiddle.net/yWnZ2/446/ Works in Chrome, Firefox, Safari, IE8-11, and Edge.

If you have the declared height ( height: 1em , height: 50% , etc.) or it is an element in which 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; }

Usually you want to specify width or max-width so that the content does not stretch the entire length of the screen / container.

If you use this for the modality that you always want to focus in the viewport that overlaps other content, use position: fixed; for both elements instead of position: absolute . http://jsfiddle.net/yWnZ2/445/

Here's a more complete entry: http://codepen.io/shshaw/pen/gEiDt

+53

shshaw Aug 07 '13 at 14:44

source share

Since this question was asked in 2012, and we have come a long way with browser support for flexboxes, I felt this answer was a must.

If the display of the parent container is flex , then yes , margin: auto auto will work to center it both horizontally and vertically, regardless of whether 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>

Please note that the width / height need not be specified absolutely, as in this jfiddle example , which uses size relative to the viewport.

Although mobile browser support is very high at the time of publication, many browsers still do not support it or require vendor prefixes. See http://caniuse.com/flexbox for updated browser support information.

+48

zpr Sep 27 '14 at 22:37

source share

None of the solutions on this page work (for me).

My decision

Html

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

CSS

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

+14

Gal Margalit Jul 19 '15 at 19:23

source share

If you know the height of the div you want to center , you can set it completely inside your parent, and then set the top value to 50% . This will put the top of the child div 50% down on its parent, i.e. Too low. Pull it back by setting its margin-top to half its height. So now you have the vertical middle of the child div sitting in the vertical middle of the parent's point - with a vertical orientation!

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/

+7

tuff Sep 13 '12 at 23:19

source share

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

+7

Paula Fleck Sep 17 '14 at 17:21

source share

These two solutions require only two nested elements.
First one . Relative and absolute positioning if the content is static (center manually).

 .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 — to accurately use the content center below:

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

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

You need to set the min-height if the content exceeds 50% of the window height. You can also manipulate this media request stream for mobile and tablet devices. But only if you play with a responsive design.

I gues. You can go further and use a simple JavaScript / JQuery script to control the minimum height or fixed height, if there is any need.

Seckound - If the content is fluid , you can also use the css and table-cell cls properties with vertical alignment and text alignment:

 /*in a wrapper*/ display:table;

and

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

It works and scales perfectly, it is often used as a flexible web design solution using grid layouts and media queries 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 a desktop solution to accurately center the content, but in some cases, relative absolute positioning will do the job better, especially if we don’t want to keep the exact proportion of the content.

+2

DevWL Sep 01 '15 at 11:15

source share

There is no easy way to center the div vertically to do the trick in every situation.

However, there are many ways to do this, depending on the situation.

Here are a few of them:

Set the top and bottom padding of the parent element, for example, padding: 20px 0px 20px 0px
Use a table, a table cell centers its contents vertically
Set the relative position of the parent element and the div that you want to vertically center to absolute, and set it as top: 50px; bottom: 50px; eg

You can also use google for "css vertical centering"

0

hasu Sep 13

source share

variable height, edge of the upper and lower cars

 .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, edge of the upper and lower cars

0

user3668456 Apr 7 '17 at 19:52

source share

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

0

Seetpal singh Jul 04 '17 at 12:30

source share

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 */ }

Show result

-one

Daniel G. Blázquez Aug 09 '16 at 12:50

source share

ov · Accepted Answer · 2012-09-14 02:23

You cannot use:

vertical-align:middle because it is not applicable to block level elements

margin-top:auto and margin-bottom:auto , because their used values will be calculated as zero

margin-top:-50% because percentage margin values are calculated relative to the width of the containing block

In fact, the nature of the document flow and the algorithms for calculating the height of the element make it impossible to use the fields to center the element vertically inside its parent. Whenever the value of a vertical field changes, it causes a recalculation of the height of the parent element (repeated flow), which, in turn, causes the repeated center of the original element ... making it an infinite loop.

You can use:

A few workarounds like this that work for your scenario; Three elements should be nested like this:

 .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 the browser.

Using margin: auto to vertically align a div

More articles: