3

CSS:

.header{
    position: absolute;
    top: 50%;
    left: calc(50% - 200px);
    opacity: 0.9;
    color: #ffffff;
    font-size: 35px;
    text-shadow: 2px 2px 5px #000000;
}

HTML:

<body>
<div class="background"></div>
<div style="position: relative">
    <div class="header"><label>A+ CMS</label></div>
</div>
</body>

Output:
enter image description here
The left property has works properly, but top property doesn't. I set 50% to top but the word "A+ CMS" keeps hang on the top of the screen.
If I change the value of top from percentage to px, it works. Why?

Newbie
  • 1,584
  • 9
  • 33
  • 72

2 Answers2

7

That's because it's 10% from the top of the its container, which currently is the height of the text so it's not moving.

If you add a height property to the container the top property will work. Here's an example of this: http://jsfiddle.net/bncteqzv/

.header{
    position: absolute;
    top: 10%;
    left: calc(50% - 200px);
    opacity: 0.9;
    color: #ffffff;
    font-size: 35px;
    text-shadow: 2px 2px 5px #000000;
}

.test {
    height: 500px; 
}
<body>
<div class="background"></div>
<div class="test" style="position: relative">
    <div class="header"><label>A+ CMS</label></div>
</div>
</body>
James Ives
  • 3,177
  • 3
  • 30
  • 63
  • 1
    I want my outer div match the screen size, I set height to 100% but doesn't works, any method? – Newbie Aug 10 '15 at 04:05
  • There are many approaches to this. This thread might prove helpful: http://stackoverflow.com/a/16837667/4933483 – James Ives Aug 10 '15 at 04:30
0

Give height to .container class div 

.header{
    position: absolute;
    top: 50%;
    left: calc(50% - 200px);
    opacity: 0.9;
    color: #ffffff;
    font-size: 35px;
    text-shadow: 2px 2px 5px #000000;
}
.container {
    height: 500px; 
  background:red;
}
<div class="background"></div>
<div class="container" style="position: relative">
    <div class="header"><label>A+ CMS</label></div>
</div>
Kishan
  • 1,182
  • 12
  • 26