Centering vertically collapsing menus

Question

I've been learning some things about HTML, CSS and jQuery to make my personal website. So far I was able to fix most problems I've encountered, some with the precious help of the people here. Thanks!

Here is the current code: http://jsfiddle.net/jcml/1eyz2z6g/

I've noticed one problem:

If I try to center the menus vertically using this code adding the class "center" to the div class "links" I get a weird behavior. As can be seen here: http://jsfiddle.net/jcml/Lz4bq7mv/

.center ul {
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

1- How can I center the menus vertically in this situation?

I also noticed something, when using the website in the phone, when I click any link "Bla" a big box shows that selects all the submenu (the parent link and sibling blas)

2- Is there a way to change this behavior?

Also:

3- Is there a way to add an animation time for the colapsing and expanding?

Thanks

http://stackoverflow.com/questions/16078868/vertically-center-ul-in-div — yuk, May 28 '15 at 21:24
Thanks, I had searched and found different solutions that didn't work, this one did. Here is the result: http://jsfiddle.net/jcml/rm5bhrm8/1/ — JCML, May 28 '15 at 21:56
When clicking on the links on a phone it has a "hover" selection. When clicking on some "Bla" the selection has the size of the parent parent

score 0 · Accepted Answer · answered May 28 '15 at 22:15

I had searched and found different solutions that didn't work, this one yuk posted did. Here is the result:

http://jsfiddle.net/jcml/rm5bhrm8/1

I created a container class:

.container {
    display: table;
    height: 100%;
    position: absolute;
    overflow: hidden;
    width: 100%;
}

And added this to the links class:

display: table-cell;
vertical-align: middle;

And changed the structure adding a div container class before every links class.

Centering vertically collapsing menus

1 Answers1