1

I have very simple markup and style rules that should put my div in the middle of the page, but it does not (actually, the top of the div would be at the middle, not 100% truly centered vertically) when the viewport is of a small enough height.

HTML:

<div>adf</div>

CSS:

div {
    background-color:red;
    margin-top:50%;
}

You can look at my Fiddle to see this. It will require you shrink the rendered window (bottom right) a bit, as it is correct initially.

smilebomb
  • 5,123
  • 8
  • 49
  • 81
  • 2
    `margin-top` uses the width of the element when using percents. See the answer to this question: http://stackoverflow.com/questions/7266363/margin-top-percentage-does-not-change-when-window-height-decreases – Marcelo Oct 08 '15 at 18:37
  • 2
    See [the spec](http://www.w3.org/TR/CSS2/box.html#margin-properties): The percentage is calculated with respect to the **width** of the generated box's containing block. Note that this is true for 'margin-top' and 'margin-bottom' as well. – Quentin Oct 08 '15 at 18:37

3 Answers3

5

Instead of 50% try 50vh

50% doesn't do what you think it would - it actually uses the width of the parent container, not the height to calculate.

willoller
  • 7,106
  • 1
  • 35
  • 63
1

Try replacing percentages with vh

div {
    background-color:red;
    margin-top:50vh;
}
<div>adf</div>

Here are more cool stuff about viewport sized measures

Kristijan Iliev
  • 4,901
  • 10
  • 28
  • 47
  • Your answer is essentially a repeat of willoller's. – Marcelo Oct 08 '15 at 18:41
  • 1
    well, I didn't see an answer was posted when I was copying code to snippet. So it seems you downvote me. Thanks! – Kristijan Iliev Oct 08 '15 at 18:42
  • Yeah not sure that deserves a downvote - those hang around, you know? – willoller Oct 08 '15 at 18:43
  • 1
    I know, but you say I have to delete my own answer, which is right and helpful, because someone posted answer half a minute before me?! – Kristijan Iliev Oct 08 '15 at 18:45
  • 1
    It's nothing personal. It just makes it hard for future readers to find the complete answer in a nice way. willoller's answer should just be edited and improved with your info. It happens all the time. – Marcelo Oct 08 '15 at 18:45
  • 1
    I delete my answers when I get scooped, but I don't downvote answers for being essentially too late. According to mods, though, downvotes are the right action since they encourage the user to delete and get some rep back (http://meta.stackoverflow.com/questions/255571/what-to-do-with-late-answers-which-retread-the-same-ground-as-previous-answers/255602#255602 and http://meta.stackoverflow.com/questions/263046/should-i-delete-my-own-downvoted-answer) – willoller Oct 08 '15 at 18:55
0

Here is another solution: http://jsfiddle.net/nb6pq14v/

html, body{height:100%; margin:0;padding:0}
 
.container-fluid{
  height:100%;
  display:table;
  width: 100%;
  padding: 0;
}
 
.row-fluid {height: 100%; display:table-cell; vertical-align: middle;}
 
 

.centering {
  float:none;
  margin:0 auto;
    background: #abc;
    height: 25px; 
}
<div class="container-fluid">
    <div class="row-fluid">
        <div class="centering text-center">
           
        </div>
    </div>
</div>
user1012181
  • 8,648
  • 10
  • 64
  • 106
  • Thanks for the answer. This is very verbose compared to other answers, including an option to simply change the units I was using. Other viewers should be directed there. – smilebomb Oct 08 '15 at 18:54
  • Okay, anyway the code is compatible with all the browsers. Just wanted to give it a try. All the best. – user1012181 Oct 08 '15 at 18:56