在无序列表元素（flexbox）中居中 link

Question

我一直在研究 flex box，我想将 "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;
}

我尝试了 margin 和 padding auto 但似乎不起作用，请帮忙！

Answer 1

只需添加此 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

Answer 2

我做了更多的研究，找到了解决这个问题的另一种方法。由于我已经在使用 flexbox，所以不妨像这样使用 flexbox：

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

正如我所说，其他解决方案工作得很好。

在无序列表元素（flexbox）中居中 link

Center link in an unordered list element (flexbox)

html

css

html-lists

flexbox