Rectangle 27 57

Centering a div of unknown height and width

Horizontally and vertically. Works with reasonably modern browsers (FF, Safari/Webkit, Chrome, IE10, Opera, etc.)

.content {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
<div class="content">This works with any content</div>

Tinker with it further on Codepen or on JSBin

This is how I tend to center things because I don't like specifying widths/heights unless I have to. I use a center-vertical and center-horizonal class though to make it reusable. Note that the transform is different if you specify both classes on a single element.

html - How to horizontally center a
in another
? - Stack Ov...

html css alignment
Rectangle 27 57

Centering a div of unknown height and width

Horizontally and vertically. Works with reasonably modern browsers (FF, Safari/Webkit, Chrome, IE10, Opera, etc.)

.content {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
<div class="content">This works with any content</div>

Tinker with it further on Codepen or on JSBin

This is how I tend to center things because I don't like specifying widths/heights unless I have to. I use a center-vertical and center-horizonal class though to make it reusable. Note that the transform is different if you specify both classes on a single element.

html - How to horizontally center a
in another
? - Stack Ov...

html css alignment
Rectangle 27 57

Centering a div of unknown height and width

Horizontally and vertically. Works with reasonably modern browsers (FF, Safari/Webkit, Chrome, IE10, Opera, etc.)

.content {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
<div class="content">This works with any content</div>

Tinker with it further on Codepen or on JSBin

This is how I tend to center things because I don't like specifying widths/heights unless I have to. I use a center-vertical and center-horizonal class though to make it reusable. Note that the transform is different if you specify both classes on a single element.

html - How to horizontally center a
in another
? - Stack Ov...

html css alignment
Rectangle 27 124

Actually you need two div's for vertical centering. The div containing the content must have a width and height.

#container {
  position: absolute;
  top: 50%;
  margin-top: -200px;
  /* half of #content height*/
  left: 0;
  width: 100%;
}

#content {
  width: 624px;
  margin-left: auto;
  margin-right: auto;
  height: 395px;
  border: 1px solid #000000;
}
<div id="container">
  <div id="content">
    <h1>Centered div</h1>
  </div>
</div>

Here is the result

Thanks!!! Worked for me. Do you mind explain a little how you came up with it?

it's an old trick... top 50% and the top margin negative half the height for the inner div

it's assuming you have a fixed height for div. don't work when div can change height.

i have compiled a list of all ways that are useful..jsfiddle.net/k6ShD/4

css - How to vertically center a div for all browsers? - Stack Overflo...

css cross-browser vertical-alignment
Rectangle 27 124

Actually you need two div's for vertical centering. The div containing the content must have a width and height.

<body>
<div id="container">
  <div id="content">
    <h1>Centered div</h1>
  </div>
</div>
</body>

#container{
   position: absolute;
   top: 50%;
   margin-top: -200px;/* half of #content height*/
   left: 0;
   width: 100%;
}
#content {
   width: 624px;
   margin-left: auto;
   margin-right: auto;
   height: 395px;
}
#container {
  position: absolute;
  top: 50%;
  margin-top: -200px;
  /* half of #content height*/
  left: 0;
  width: 100%;
}

#content {
  width: 624px;
  margin-left: auto;
  margin-right: auto;
  height: 395px;
  border: 1px solid #000000;
}
<div id="container">
  <div id="content">
    <h1>Centered div</h1>
  </div>
</div>

Here is the result

Thanks!!! Worked for me. Do you mind explain a little how you came up with it?

it's an old trick... top 50% and the top margin negative half the height for the inner div

it's assuming you have a fixed height for div. don't work when div can change height.

i have compiled a list of all ways that are useful..jsfiddle.net/k6ShD/4

css - How to vertically center a div for all browsers? - Stack Overflo...

css cross-browser vertical-alignment
Rectangle 27 124

Actually you need two div's for vertical centering. The div containing the content must have a width and height.

#container {
  position: absolute;
  top: 50%;
  margin-top: -200px;
  /* half of #content height*/
  left: 0;
  width: 100%;
}

#content {
  width: 624px;
  margin-left: auto;
  margin-right: auto;
  height: 395px;
  border: 1px solid #000000;
}
<div id="container">
  <div id="content">
    <h1>Centered div</h1>
  </div>
</div>

Here is the result

Thanks!!! Worked for me. Do you mind explain a little how you came up with it?

it's an old trick... top 50% and the top margin negative half the height for the inner div

it's assuming you have a fixed height for div. don't work when div can change height.

i have compiled a list of all ways that are useful..jsfiddle.net/k6ShD/4

css - How to vertically center a div for all browsers? - Stack Overflo...

css cross-browser vertical-alignment
Rectangle 27 124

Actually you need two div's for vertical centering. The div containing the content must have a width and height.

#container {
  position: absolute;
  top: 50%;
  margin-top: -200px;
  /* half of #content height*/
  left: 0;
  width: 100%;
}

#content {
  width: 624px;
  margin-left: auto;
  margin-right: auto;
  height: 395px;
  border: 1px solid #000000;
}
<div id="container">
  <div id="content">
    <h1>Centered div</h1>
  </div>
</div>

Here is the result

Thanks!!! Worked for me. Do you mind explain a little how you came up with it?

it's an old trick... top 50% and the top margin negative half the height for the inner div

it's assuming you have a fixed height for div. don't work when div can change height.

i have compiled a list of all ways that are useful..jsfiddle.net/k6ShD/4

css - How to vertically center a div for all browsers? - Stack Overflo...

css cross-browser vertical-alignment
Rectangle 27 8

Centering a div is very easy of you know the width and height of the Div. Assuming that your div has 100width and 100 Height

div {
    position:absolute;
    left:50%;
    top;50%;
    margin-left:-50px;
    margin-top:-50px;
}

if you are not sure about the dimentions , then probably you can go for a jquery method.

css - Centering a div with absolute positioning - Stack Overflow

css html center css-position
Rectangle 27 444

You basically need to set top and left to 50% to center the left-top corner of the div. You also need to set the margin-top and margin-left to the negative half of the div's height and width to shift the center towards the middle of the div.

Thus, provided a <!DOCTYPE html> (standards mode), this should do:

Or, if you don't care about centering vertically and old browsers such as IE6/7, then you can instead also add left: 0 and right: 0 to the element having a margin-left and margin-right of auto, so that the fixed positioned element having a fixed width knows where its left and right offsets start. In your case thus:

position: fixed;
width: 500px;
height: 200px;
margin: 5% auto; /* Will not center vertically and won't work in IE6/7. */
left: 0;
right: 0;

Again, this works only in IE8+ if you care about IE, and this centers only horizontally not vertically.

I found that trick in css-tricks.com/. But when I change the width and height, it's not moving center. Ya, I should change the margin-left and top when change height and width.

That's a quite good article. Maybe you should in the future try to read the article's text as well instead of blindly copypasting only the code .. ;)

FYI: this will correctly position things in the middle, but unfortunately you lose your scroll-bars - any content clipped off by the viewport won't be reachable, even if you scroll, because the fixed position is based on the viewport, not the page. So far, the only solution I've found to that is with javascript.

Groxx I think you could put scroll bars inside a div in the pop up using the overflow property.

ah. nm if thats the case, i mean of course the browser size will be dynamic, not sure why that was in the question. instead i thought he meant that the popup dimensions needed to be dynamic. thats the case for me so im using transform: translate(-50%, -50%); works great except not on IE8.

css - Center a position:fixed element - Stack Overflow

css css-position centering
Rectangle 27 442

You basically need to set top and left to 50% to center the left-top corner of the div. You also need to set the margin-top and margin-left to the negative half of the div's height and width to shift the center towards the middle of the div.

Thus, provided a <!DOCTYPE html> (standards mode), this should do:

Or, if you don't care about centering vertically and old browsers such as IE6/7, then you can instead also add left: 0 and right: 0 to the element having a margin-left and margin-right of auto, so that the fixed positioned element having a fixed width knows where its left and right offsets start. In your case thus:

position: fixed;
width: 500px;
height: 200px;
margin: 5% auto; /* Will not center vertically and won't work in IE6/7. */
left: 0;
right: 0;

Again, this works only in IE8+ if you care about IE, and this centers only horizontally not vertically.

I found that trick in css-tricks.com/. But when I change the width and height, it's not moving center. Ya, I should change the margin-left and top when change height and width.

That's a quite good article. Maybe you should in the future try to read the article's text as well instead of blindly copypasting only the code .. ;)

FYI: this will correctly position things in the middle, but unfortunately you lose your scroll-bars - any content clipped off by the viewport won't be reachable, even if you scroll, because the fixed position is based on the viewport, not the page. So far, the only solution I've found to that is with javascript.

Groxx I think you could put scroll bars inside a div in the pop up using the overflow property.

ah. nm if thats the case, i mean of course the browser size will be dynamic, not sure why that was in the question. instead i thought he meant that the popup dimensions needed to be dynamic. thats the case for me so im using transform: translate(-50%, -50%); works great except not on IE8.

css - Center a position:fixed element - Stack Overflow

css css-position centering
Rectangle 27 2

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.

Tested in Chrome, FF, Opera, IE.

/* This parent can be any width and height */
.block {
  text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can
   also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}
<div style="width: 400px; height: 200px;">
   <div class="block" style="height: 90%; width: 100%">
  <div class="centered">
	 <h1>Some text</h1>
	 <p>Any other text..."</p>
  </div> 
   </div>
</div>

css - How to vertically center a div for all browsers? - Stack Overflo...

css cross-browser vertical-alignment
Rectangle 27 2

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.

Tested in Chrome, FF, Opera, IE.

/* This parent can be any width and height */
.block {
  text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can
   also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}
<div style="width: 400px; height: 200px;">
   <div class="block" style="height: 90%; width: 100%">
  <div class="centered">
	 <h1>Some text</h1>
	 <p>Any other text..."</p>
  </div> 
   </div>
</div>

css - How to vertically center a div for all browsers? - Stack Overflo...

css cross-browser vertical-alignment
Rectangle 27 2

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.

Tested in Chrome, FF, Opera, IE.

/* This parent can be any width and height */
.block {
  text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can
   also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}
<div style="width: 400px; height: 200px;">
   <div class="block" style="height: 90%; width: 100%">
  <div class="centered">
	 <h1>Some text</h1>
	 <p>Any other text..."</p>
  </div> 
   </div>
</div>

css - How to vertically center a div for all browsers? - Stack Overflo...

css cross-browser vertical-alignment
Rectangle 27 2

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.

Tested in Chrome, FF, Opera, IE.

/* This parent can be any width and height */
.block {
  text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can
   also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}
<div style="width: 400px; height: 200px;">
   <div class="block" style="height: 90%; width: 100%">
  <div class="centered">
	 <h1>Some text</h1>
	 <p>Any other text..."</p>
  </div> 
   </div>
</div>

css - How to vertically center a div for all browsers? - Stack Overflo...

css cross-browser vertical-alignment
Rectangle 27 45

This is a pure CSS2 solution for horizontally and vertically centering without known sizes of either container nor child. No hacks are involved. I discovered it for this answer and I also demonstrated it in this answer.

vertical-align: middle
line-height: 0
html,
body {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
}
#center {
    position: relative;
    display: block;
    top: 50%;
    margin-top: -1000px;
    height: 2000px;
    text-align: center;
    line-height: 2000px;
}    
#wrap {
    line-height: 0;
}
#wrap img {
    vertical-align: middle;
}

The only caveat is IE7, for which the two innermost elements have to declared at one line, as demonstrated in this fiddle:

<span id="center">
    <span id="wrap"><img src="http://lorempixum.com/300/250/abstract" alt="" /></span>
</span>

Note that the span's are also required for IE7. In every other browser, the span's may be div's.

Nicely done. This is exactly what many people are looking for, including myself. Definitely the cleanest workaround for people who need to support ie7 [sigh] I edited your fiddle to show another practical example . jsfiddle.net/ryanore/R7szX/2

wait how is this an answer.... so basically I get to vertically align, but I lose the ability to scroll my page (overflow: hidden on html,body)

@xckpd7 Of course it doesn't have to be the body; you can use this solution on any container element as shown here.

Thanks! I made some alterations which (1) make textual content look okay (2) center the content in respect to an element besides the body (3) use classes instead of ids so it's reusable. jsfiddle.net/sparebytes/q9sfQ

@Rupam That's an arbitrary value. It would be the "maximum" height a device could display.

html - CSS: Vertically align div when no fixed size of the div is know...

html css vertical-alignment
Rectangle 27 45

This is a pure CSS2 solution for horizontally and vertically centering without known sizes of either container nor child. No hacks are involved. I discovered it for this answer and I also demonstrated it in this answer.

vertical-align: middle
line-height: 0
html,
body {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
}
#center {
    position: relative;
    display: block;
    top: 50%;
    margin-top: -1000px;
    height: 2000px;
    text-align: center;
    line-height: 2000px;
}    
#wrap {
    line-height: 0;
}
#wrap img {
    vertical-align: middle;
}

The only caveat is IE7, for which the two innermost elements have to declared at one line, as demonstrated in this fiddle:

<span id="center">
    <span id="wrap"><img src="http://lorempixum.com/300/250/abstract" alt="" /></span>
</span>

Note that the span's are also required for IE7. In every other browser, the span's may be div's.

Nicely done. This is exactly what many people are looking for, including myself. Definitely the cleanest workaround for people who need to support ie7 [sigh] I edited your fiddle to show another practical example . jsfiddle.net/ryanore/R7szX/2

wait how is this an answer.... so basically I get to vertically align, but I lose the ability to scroll my page (overflow: hidden on html,body)

@xckpd7 Of course it doesn't have to be the body; you can use this solution on any container element as shown here.

Thanks! I made some alterations which (1) make textual content look okay (2) center the content in respect to an element besides the body (3) use classes instead of ids so it's reusable. jsfiddle.net/sparebytes/q9sfQ

@Rupam That's an arbitrary value. It would be the "maximum" height a device could display.

html - CSS: Vertically align div when no fixed size of the div is know...

html css vertical-alignment
Rectangle 27 7

"Vertical centering is only possible if the element is positioned absolutely and has a known height." This statement is not exactly correct.

You can try and use display:inline-block; and its possibility to be aligned vertically within its parent's box. This technique allows you to align element without knowing its height and width, although it requires you to know parent's height, at the least.

<div id="container">
    <div id="aligned-middle" class="inline-block">Middleman</div>
    <div class="strut inline-block">&nbsp;</div>
</div>
#container {
    /* essential for alignment */
    height:300px;
    line-height:300px;
    text-align:center;
    /* decoration */
    background:#eee;
}
    #aligned-middle {
        /* essential for alignment */
        vertical-align:middle;
        /* decoration */
        background:#ccc;
        /* perhaps, reapply inherited values, so your content is styled properly */
        line-height:1.5;
        text-align:left;
    }
    /* this block makes all the "magic", according to http://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align specification: "The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge." */
    #container .strut {
        /* parent's height */
        height:300px;
    }
.inline-block {
    display:inline-block;
    *display:inline;/* for IE < 8 */
    *zoom:1;/* for IE < 8 */
}

Then #aligned-middle will be centered within #container. This is the simplest use of this technique, but it's a nice one to be familiar with.

Rules marked with "/* for IE < 8 */" should be placed in a separate stylsheet, via use of conditional comments.

edit: (this particular snippet tested in ie6 and ff3.6, but I use this a lot, it's pretty cross-browser. if you would need support for ff < 3, you would also need to add display:-moz-inline-stack; under display:inline-block; within .inline-block rule.)

javascript - Cross browser div center alignment using CSS - Stack Over...

javascript jquery html css alignment
Rectangle 27 69

If I correctly understand what you want, you may leave the width and height attributes off the image to maintain aspect ratio and use flexbox to do the centering for you.

<div class="fill">
    <img ...>
</div>
.fill {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden
}
.fill img {
    flex-shrink: 0;
    min-width: 100%;
    min-height: 100%
}

I tested this successfully in IE9, Chrome 31, and Opera 18. But no other browsers were tested. As always you must consider your particular support requirements.

In IE9 the image is not centered vertically or horizontally with this method, it is aligned to the top and left. i59.tinypic.com/ouo77s.png

This has an issue on iPad, it appears safari stretches the image to 100% of its height but does not retain the min-width property.

This seems to scale small images up to fill, but not down to fit. At least when I use a large image it only shows a tiny portion of it.

.fill img { min-height:100%; min-width: 100%; object-fit: cover; }

CSS: filling a div with an image while staying in proportion - Stack O...

css image css3 positioning flexbox
Rectangle 27 7

Button one: anything of type display: block will assume the full parents width. True. Bad example.

display: inline-block
text-align: center

Probably the easiest, and most widely compatible, even with vintage browsers...

.wrapTwo
  text-align: center;
.two
  display: inline-block; // instantly shrinks width

Button 3: No need to put anything on the wrap. So perhaps this is the most elegant solution. Also works vertically. (Browser support for transtlate is good enough (IE9) these days...).

position: relative;
display: inline-block; // instantly shrinks width
left: 50%;
transform: translateX(-50%);

Btw: Also a great way for vertically centering blocks of unknown height (in connection with absolute positioning).

Button 4: Absolute positioning. Just make sure to reserve enough height in the wrapper, since noone else will (neither clearfix nor implicit...)

.four
  position absolute
  top 0
  left 50%
  transform translateX(-50%)
.wrapFour
  position relative // otherwise, absolute positioning will be relative to page!
  height 50px // ensure height
  background lightgreen // just a marker

Button 5: Lastly: float (which brings also block-level elements to dynamic width) and a relative shift. Although I've never seen this in the wild. Perhaps there are disadvantages...

.wrapFive
  &:after // aka 'clearfix'
    content ''
    display table
    clear both

.five  
  float left
  position relative
  left 50%
  transform translateX(-50%)

html - Centering a div block without the width - Stack Overflow

html css
Rectangle 27 7

Button one: anything of type display: block will assume the full parents width. True. Bad example.

display: inline-block
text-align: center

Probably the easiest, and most widely compatible, even with vintage browsers...

.wrapTwo
  text-align: center;
.two
  display: inline-block; // instantly shrinks width

Button 3: No need to put anything on the wrap. So perhaps this is the most elegant solution. Also works vertically. (Browser support for transtlate is good enough (IE9) these days...).

position: relative;
display: inline-block; // instantly shrinks width
left: 50%;
transform: translateX(-50%);

Btw: Also a great way for vertically centering blocks of unknown height (in connection with absolute positioning).

Button 4: Absolute positioning. Just make sure to reserve enough height in the wrapper, since noone else will (neither clearfix nor implicit...)

.four
  position absolute
  top 0
  left 50%
  transform translateX(-50%)
.wrapFour
  position relative // otherwise, absolute positioning will be relative to page!
  height 50px // ensure height
  background lightgreen // just a marker

Button 5: Lastly: float (which brings also block-level elements to dynamic width) and a relative shift. Although I've never seen this in the wild. Perhaps there are disadvantages...

.wrapFive
  &:after // aka 'clearfix'
    content ''
    display table
    clear both

.five  
  float left
  position relative
  left 50%
  transform translateX(-50%)

html - Centering a div block without the width - Stack Overflow

html css