Top: 50% is not working CSS

Question

I'm doing a website and I trying to center a text but I don't know what the top is not working. It works if I use something like this:

up:25px;

But this doesn't work when I want to use this:

up:50%;

Can you help me? This is my code:

 .absolute{ position:absolute; } .relative{ position:relative; } .white{ background-color:white; } #menu-title{ width:300px; z-index:5; top:50%; left:calc(50% - 150px); top:calc(50% - 2.5em); } 

 <div class='relative' id='menu'> <div class='absolute white' id='menu-title'> <h2 >Menu</h2> </div> </div> 

Answer 1

Considering you want to center the <h2> in the <div> with id of 'menu-title', you have several ways to do that.

If you want to use the top property you first have to define the position to fixed, like this:

#menu-title {
    position: fixed;
    top: 50%;
} 

The other way to do that is to use margins:

#menu-title {
    margin-top: 100px;
}

You can always change the px.

Answer 2

You should use position:fixed and also depends on the size of the text you can move it to exactly in the center with transform

#menu-title{
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
 }

hope that helps

Answer 3

Make position:fixed

 .absolute{ position:fixed; } .relative{ position:relative; } .white{ background-color:white; } #menu-title{ width:300px; z-index:5; top:50%; left:calc(50% - 150px); top:calc(50% - 2.5em); } 

 <div class='relative' id='menu'> <div class='absolute white' id='menu-title'> <h2 >Menu</h2> </div> </div> 

Answer 4

First of all... it IS working, only not as you expected it. The CSS top:calc(50% - 2.5em) , is relative to the first POSITIONED ancestor element. In your case this is the relative (parent) element with id="menu" . The height of this element is 0. Therefore it works as it should, but apperently not as you expected.

You might have expected that the menu had a certain height. It does not, because its only child (the menu-title div) is positioned absolute. Absolute positioned elements do not grow their parents.

More likely is that you expected that the title would position relative to the viewport height, instead of relative to its parent.

---

There are three ways to position the menu-title relative to the viewport height:

Solution 1. Remove relative positioning from the parent

This will make the parents position static (not positioned) and the first positioned ancestor element becomes the viewport. The viewport has a 100% height by nature. Therefore this solution works. A working example of this solution can be found here: http://codepen.io/anon/pen/bBLZva

Solution 2. Give the parent 100% height

When removing the relative positioning from the ancestor(s) is not an option, you can give the parent an 100% height. This, however, is not a straight forward task. Simply adding the CSS height: 100% to the parent is not enough. The height of the menu div is relative to the height of its parent element and not to the height of the viewport. Therefore you need to set their parents explicitly to 100% (viewport height). This can be achieved by adding: body,html {height: 100%;} to the CSS. A working example of this solution can be found here: http://codepen.io/anon/pen/XNZGOv

Solution 3. Use position fixed

Know that position: fixed is fundamentally different than position: absolute AND has compatability issues on older iOS and Android versions (stock browser). However it MIGHT result in the expected behaviour. This can be explained by the fact that 'position: fixed' implies positioning relative to the viewport (and not to the parent). You should use position fixed on the title itsself. A working example of this solution can be found here: http://codepen.io/anon/pen/PbQgpB