rat_fucker

1. Смотрите, работает https://jsfiddle.net/L59cqhft/
Значит, с вашим кодом где-то по дороге происходят какие-то преобразования.

2.

Также почему :before сполз вниз, хотя стоит top: 50%. Разве он не должен находится на середине рамки?

Абсолют позиционируется относительно ближайшего родителя с position: relative, а при его отсутствии относительно окна браузера.
Зададите для blockquote relative, будет позиционироваться относительно него.

.top_menu_link_container:nth-child(1) .top_menu_item {}
.top_menu_link_container:nth-child(2) .top_menu_item {}

Вы же кнопке размеры задали, вот она и потянула шапку...

Если хотите кнопку поднять вверх с текущими размерами, тогда так:

.btn {
background: url() no-repeat;
width: 100px;
height: 100px;
border: none;
position: relative;
transform: translateY(-50%);
}

P.S У вас там ну очень жесткая верстка..тьма ошибок, а шапка поплыла, потому что у вас в этом классе задана высота:

div.top_menu_link_container, div.top_menu_link_container_end {
    float: left;
    height: 31px;
}

Уберите высоту, и шапка станет выше