Positioning an Element at the center

1

Hello, having some trouble with the positioning of this Text. How can i get it in the center and still got the automatic height of the users screen filed with my background image?
Link to my Projekt: http://codepen.io/Chepalos/pen/wgbdoM

2

It is because you used position:absolute.

position:absolute will attach the first position:relative element in your css + html divs. And if absolute element not found a relative div then it will attach at body which means it will position at top left.

3

ok but if i change it to relative i get some space at the bottom, which i don’t want.

4

I’d recommend this guide https://css-tricks.com/centering-css-complete-guide/

I use these methods a lot on my projects.

1 Like
5

I think i figured out why this is happening. Because parent element of h1 doesnt have a height value. Therefore “h1” was centered in center-block if you check inspect option. if you give center-block a height and paste this snippet to your h1 css code it should be fine.

    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
6

Thank you for your help, but i didn’t work so i just did something different, which does the Job :slight_smile:

7

Sounds great. If you post your code snippet maybe it will help other campers who may have this problem.