Centering vertically is very hard.You can do it with absolute positioning, but your elements will be required to have a defined height.First you have to give the parent element a fixed height. If you want it centered in the whole window, you'll have to use 100% for the html and body elements:
html,body { height: 100%; }
After that, you have to give your element a fixed height:
.myElement {height: 10em;}
Then you have to position it absolutely and move it 50% from the top:
html,body { height: 100%; }.myElement {height: 10em;position: absolute;top: 50%;}
This leaves your element halfway down from the top of the document. Now you have to use a negative margin to move the element back up. You'll move it half of its height:
html,body { height: 100%; }.myElement {height: 10em;position: absolute;top: 50%;margin-top: -5em;}
Now your element will be centered compared to the window.If you want it centered compared to an element rather than the full window, be sure to make the parent element have a relative position:
.parentElement {position: relative;height: 400px;}.myElement {height: 10em;position: absolute;top: 50%;margin-top: -5em;}