Как сделать абсолютное позиционирование по вертикали относительно центра?

Question

[Евгений Обыкновенный]

Делаю многоуровневое меню с помощью списков и css.
Чтоб не запутывать, упрощу код, оставлю только то, что касается проблемы.

li { position: relative }
ul { position: absolute; left: 100%; top: 0.2em; }
<li>Пункт 1
   <ul>
      <li>Подпункт 1
          <ul> .... </ul>
      </li>
      <li>Подпункт 2
          <ul> .... </ul>
      </li>
   </ul>
</ul>

Проблема в том, что списки меню у меня длинные и при раскрытии вложенных уровней подменю оказываются все ниже и ниже, и иногда не помещаются на экране.



Хочу сделать так, чтоб подменю позиционировались относительно своего центра:



Нельзя ли сделать так, чтоб при позиционировании ul отсчет происходил не от верхнего края, а от центра? Родительский li по высоте схлопнулся до высоты одной строки и top:-50% не помогает.

Как можно решить такую проблему?

Answer 1

[Олег]

ul {
position: absolute;
left: 100%;
top: 50%;
transform: translate(0,-50%);
margin: 0;
}

Comments

[Евгений Обыкновенный]

Нашел другое решение. С помощью js меняю тип позиционирования всплывающего подменю в зависимости от положения внутри видимого окна. Но спасибо за transform, не знал, что есть такое замечательное свойство.