Content vertical aligned

#container{ height: 250px; position: relative; } #content{ top: 50%; left: 50%; transform: translate(-50%, -50%); -o-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); position: absolute; }
It helps to align content at middle of a container, for this, it is necessary to set a height for the container and relative position.

If you desire to align at very middle of a container, set left and top to 50%, if you want to align just middle but not center omite left.
Play with the transform: translate(-50%, -50%), if you omit left, you will need to change the first parameter to 0, depending in your necessity it will be the value.

3 Responses

Or if you have a parent element with an undetermined height, you can just set the position property to relative in the child element, give a value of 50% to the top property, and translate it -50% vertically using CSS3 2D transforms.
Sounds more simple than my, i'm relatively new on html5 so thanks for the tip. n,n
No problem :), keep up the good work.

Write a comment

You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.