Центральная ссылка в элементе неупорядоченного списка (flexbox)

Question

Я играл с гибкой коробкой, и я хотел бы центрировать тест «Logo» в верхнем левом углу по вертикали в его синем контейнере.

Вы можете увидеть здесь: http://codepen.io/TimRos/pen/MwKNgw

* { 
    margin: 0; 
    padding: 0; 
} 
.box { 
    color: white; 
    font-size: 80px; 
    text-align: center; 
    text-shadow: 4px 4px 3px black; 
} 


/* COLORS & Style 
===================================== */ 

.main-header { background: #e3e3e3; } 
.main-footer { background: #e3e3e3; } 
.main-content { background: #e3e3e3; } 

.main-wrapper { 
    box-shadow: 2px 2px 10px #333; 
} 


.main-wrapper { 
    width: 80%; 
    margin: 0 auto; 
} 

/* HEAD 
===================================== */ 

.main-header { 
    width: 100%; 
    height: 100px; 
    border-bottom: 1px solid black; 
} 

.main-nav { 
    list-style: none; 
    display: flex; 
    flex-flow: row wrap; 
    justify-content: flex-end; 
    align-items: flex-end; 
    height: 100%; 

} 

.main-nav li { 
    margin-left: 8px; 
    margin-right: 8px; 
} 

#logo { 
    margin-right: auto; /* Align Logo to Left, Nav to the right*/ 
    margin-left: 0; 
    align-self: center; 
} 

.main-nav li:last-child { 
    margin-right: 0; 
} 

.main-nav li { 
    background-color: #3f8abf; 
    border-top-left-radius: 5px; 
    border-top-right-radius: 5px; 
    border-bottom: 4px solid firebrick; 


} 
.main-nav a { 
    text-decoration: none; 
    color: white; 
    text-align: center; 
    font-weight: bold; 
    padding: 8px 15px; 
    display: block; 
    width: 100px; 
} 

#logo { 
    border-top-left-radius: 0; 
    border-bottom-right-radius: 5px; 
    border-bottom: 0; 
    border-left: 4px solid firebrick; 
    padding: 0; 
    height: 100%; 

} 

#logo h1 { 
    padding: 0; 
    margin: 0; 
} 


/* CONTENT 
===================================== */ 

.main-content { 
    padding: 15px; 
} 
h3 { 
    margin-bottom: 15px; 
} 

/* FOOTER 
===================================== */ 

.main-footer { 
    border-top: 1px solid black; 
    text-align: center; 
    padding: 5px; 
} 

Я попытался поля и отступы авто, но это не кажется, работает, пожалуйста, помогите!

Answer 1

Я сделал немного больше исследований и нашел другое решение этой проблемы. Так как я уже использую Flexbox в любом случае, могли бы также использовать Flexbox так:

#logo { 
    display: flex; 
    align-items: center 
} 

Как я уже говорил, другое решение работает просто отлично.

Answer 2

Просто добавьте этот CSS:

CSS

#logo a{ 
    position: relative; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%,-50%); 
    -webkit-transform: translate(-50%,-50%); // For Safari and Chrome Mobile 
} 

DEMO HERE