StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Instead of using auto margins to center your div, try playing with the left and top positions and left/top margins; The trick is to put it 50% from the top and 50% from the left and give a negative left margin equals to half of the div width. The same goes to the top margin. </p> <p>Example:</p> <pre><code>#divMessage { z-index: 500; position: absolute; top: 50%; left: 50%; right: 0; bottom: 0; background-color: lightblue; width: 400px; min-height: 400px; text-align: center; font-size: 3em; margin-left: -200px; margin-top: -200px; padding: 10px; } </code></pre> <p>Take a look at this fiddle: <a href="http://jsfiddle.net/VtAcB/" rel="nofollow">http://jsfiddle.net/VtAcB/</a></p> <p>Like this you can set the min-height CSS property, as suggested by @EricFrick.</p> <p><strong>UPDATE</strong></p> <p>Indeed, the content wasn't making the container grow as needed, only to some point. After giving this a try, I found out that there is no way to make it the way you want. The min-height only changes the initial height, but when it overflows, the div stops growing. It seems this is a behavior common to absolutely positioned elements.</p> <p>A workaround: continue to set the min-height just like the previous example, changing the values and set overflow-y: scroll or overflow: auto; to #divMessage. But remember to adjust the top margin as you change the box min-height, or you won't have a vertically centered block anymore.</p> <p>Updated version: <a href="http://jsfiddle.net/VtAcB/1/" rel="nofollow">http://jsfiddle.net/VtAcB/1/</a></p> <p>About the positioning issue you pointed, note that in the fiddle the example is centered properly, there is something in your code that is preventing the div to center. I bet there is something related to the div that contains it in your project. Remember that elements that have position: absolute gets its position relative to its closest positioned ancestor or to the containing block. Check your container div width and height with chrome dev tools or firebug to see its dimensions.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload