Q:

Выровнять по вертикали блок с position: absolute

Я делаю выпадающее меню, вот оно

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {height: 100%;}
body {
    height: 100%;
    background-color: #909090;
}


.wrapper {
    position:  relative;
    height:  200px;
    width:  100%;
    padding:  30px;
    background-color:  rosybrown;
}

/* MAIN-MENU */

.menu {
    margin: 0;
    font-family: arial, sans-serif;
    white-space: nowrap;
    padding: 0;
    line-height: 0.9em;
}
.main-menu {
    position:  absolute;
    bottom:  0;
    right: 0;
    padding: 30px;
    text-align: center;
}
.menu-item {
    /* position: relative; */
    display: inline-block;
    text-transform: uppercase;
    cursor: pointer;
}
.main-menu .menu-item {
    margin-left: 30px;
}
.menu a {
    display:  block;
    position: relative;
    bottom: -2px;
    text-decoration: none;
    color: inherit;
    transition: color ease-in-out 0.4s;
}

.menu-item a:after {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: -5px;
    content: '';
    display: block;
    height: 2px;
    border-radius: 2px;
    background-color: white;
    visibility: hidden;
    -webkit-transition: .4s cubic-bezier(0.165,0.84,0.44,1);
    -o-transition: .4s cubic-bezier(0.165,0.84,0.44,1);
    -moz-transition: .4s cubic-bezier(0.165,0.84,0.44,1);
    transition: .4s cubic-bezier(0.165,0.84,0.44,1);
    -webkit-transform: scaleX(0);
    -moz-transform: scaleX(0);
    -ms-transform: scaleX(0);
    -o-transform: scaleX(0);
    transform: scaleX(0);
}

.menu-item a:hover::after {
    visibility: visible;
    -webkit-transition: .4s cubic-bezier(0.165,0.84,0.44,1);
    -o-transition: .4s cubic-bezier(0.165,0.84,0.44,1);
    -moz-transition: .4s cubic-bezier(0.165,0.84,0.44,1);
    transition: .4s cubic-bezier(0.165,0.84,0.44,1);
    -webkit-transform: scaleX(1);
    -moz-transform: scaleX(1);
    -ms-transform: scaleX(1);
    -o-transform: scaleX(1);
    transform: scaleX(1);
}

.dropdown:hover .dropdown-menu {
    max-height: 132px;
}
.dropdown-menu .menu-item {
    display: block;
    margin: 0;
    padding: 0 15px;
    padding-bottom: 15px;
    background-color:  gray;
}
.dropdown-menu .menu-item:first-child {
    padding-top: 15px;
}

/* проблемный кусок */

.dropdown-menu {
    position: absolute;
    left: -30px;
    top: 100%;
    z-index: 1000;
    /* MAX-HEIGHT должен быть ноль. сейчас стоит не ноль, чтобы выпадайка не пряталась */
    max-height: 102px;
    overflow: hidden;
    -webkit-transition: max-height ease-in-out .4s;
    -moz-transition: max-height ease-in-out .4s;
    -ms-transition: max-height ease-in-out .4s;
    -o-transition: max-height ease-in-out .4s;
    transition: max-height ease-in-out .4s;
}
<div class="wrapper">
    <nav class="main-menu">
        <ul class="menu">
            <li class="dropdown menu-item">
                <a href="#">dropdown</a>
                <ul class="menu dropdown-menu">
                    <li class="menu-item">
                        <a href="#">sub item</a>
                    </li>
                    <li class="menu-item">
                        <a href="#">sub item sub item </a>
                    </li>
                    <li class="menu-item">
                        <a href="#">sub item sub item sub item...</a>
                    </li>
                </ul>
            </li>
            <li class="menu-item"><a href="#">item</a></li>
            <li class="menu-item"><a href="#">item</a></li>
        </ul>
    </nav>
</div>

:
Подменю у меня шире, чем элемент, которые его открывает. Кроме того, находится в position: absolute, чтобы не попадать на отступ шапки. Он и его триггер должны быть выровнены по вертикали по центру (за неимением лучших дизайнерских идей).
Я не нашёл ничего лучше, чем установить ему сдвиг в пикселях. (см. конец стайлшита). Но это, конечно же, не решение: поменяй текст - всё уедет.
Как решить? Возможно, я не с того края вообще к решению подхожу?
Нужен скрипт?

A:

Способ с transform и calc 

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {height: 100%;}
body {
    height: 100%;
    background-color: #909090;
}


.wrapper {
    position:  relative;
    height:  200px;
    width:  100%;
    padding:  30px;
    background-color:  rosybrown;
}

/* MAIN-MENU */

.menu {
    margin: 0;
    font-family: arial, sans-serif;
    white-space: nowrap;
    padding: 0;
    line-height: 0.9em;
}
.main-menu {
    position:  absolute;
    bottom:  0;
    right: 0;
    padding: 30px;
    text-align: center;
}
.menu-item {
    position: relative;
    /*Позиционировать относительно непосредственного родителя*/
    display: inline-block;
    text-transform: uppercase;
    cursor: pointer;
}
.main-menu .menu-item {
    margin-left: 30px;
}
.menu a {
    display:  block;
    position: relative;
    bottom: -2px;
    text-decoration: none;
    color: inherit;
    transition: color ease-in-out 0.4s;
}

.menu-item a:after {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: -5px;
    content: '';
    display: block;
    height: 2px;
    border-radius: 2px;
    background-color: white;
    visibility: hidden;
    -webkit-transition: .4s cubic-bezier(0.165,0.84,0.44,1);
    -o-transition: .4s cubic-bezier(0.165,0.84,0.44,1);
    -moz-transition: .4s cubic-bezier(0.165,0.84,0.44,1);
    transition: .4s cubic-bezier(0.165,0.84,0.44,1);
    -webkit-transform: scaleX(0);
    -moz-transform: scaleX(0);
    -ms-transform: scaleX(0);
    -o-transform: scaleX(0);
    transform: scaleX(0);
}

.menu-item a:hover::after {
    visibility: visible;
    -webkit-transition: .4s cubic-bezier(0.165,0.84,0.44,1);
    -o-transition: .4s cubic-bezier(0.165,0.84,0.44,1);
    -moz-transition: .4s cubic-bezier(0.165,0.84,0.44,1);
    transition: .4s cubic-bezier(0.165,0.84,0.44,1);
    -webkit-transform: scaleX(1);
    -moz-transform: scaleX(1);
    -ms-transform: scaleX(1);
    -o-transform: scaleX(1);
    transform: scaleX(1);
}

.dropdown:hover .dropdown-menu {
    max-height: 132px;
}
.dropdown-menu .menu-item {
    display: block;
    margin: 0;
    padding: 0 15px;
    padding-bottom: 15px;
    background-color:  gray;
}
.dropdown-menu .menu-item:first-child {
    padding-top: 15px;
}

/* (не)проблемный кусок */

.dropdown-menu {
    position: absolute;
    /*выравниваем левый край по центру родителя*/
    left: 50%;
    /*смещаем элемент влево на 50% ширины*/
    transform:translateX(-50%);
    /*Учитываем отступ шапки*/
    top: calc(100% + 30px);
    z-index: 1000;
    /* MAX-HEIGHT должен быть ноль. сейчас стоит не ноль, чтобы выпадайка не пряталась */
    max-height: 102px;
    overflow: hidden;
    -webkit-transition: max-height ease-in-out .4s;
    -moz-transition: max-height ease-in-out .4s;
    -ms-transition: max-height ease-in-out .4s;
    -o-transition: max-height ease-in-out .4s;
    transition: max-height ease-in-out .4s;
}
<div class="wrapper">
    <nav class="main-menu">
        <ul class="menu">
            <li class="dropdown menu-item">
                <a href="#">dropdown</a>
                <ul class="menu dropdown-menu">
                    <li class="menu-item">
                        <a href="#">sub item</a>
                    </li>
                    <li class="menu-item">
                        <a href="#">sub item sub item </a>
                    </li>
                    <li class="menu-item">
                        <a href="#">sub item sub item sub item...</a>
                    </li>
                </ul>
            </li>
            <li class="menu-item"><a href="#">item</a></li>
            <li class="menu-item"><a href="#">item</a></li>
        </ul>
    </nav>
</div>

