CSS的position定位布局问题

Question

Codepen

HTML部分

<header class="header">
    <div class="container">
        <div class="logo">
            <a href="#"><img src="img/logo.svg" alt="logo"></a>
        </div>
        <div class="menu"></div>
    </div>
</header>

CSS部分

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.header {
    background: rgba(255,255,255,.5);
    width: 100%;
    height: 100px;
    line-height: 100px;
    font-size: 20px;
    position: fixed;
    overflow: hidden;
    z-index: 99;
}

.logo,
.menu {
    position: absolute;
    top: 50%;
    -webkit-transform: translate(0,-50%);
       -moz-transform: translate(0,-50%);
        -ms-transform: translate(0,-50%);
         -o-transform: translate(0,-50%);
            transform: translate(0,-50%);
}

.logo {
    width: 90px;
    height: 60px;
}

.logo img {
    width: 100%;
    position: absolute;
    top: 0;
}

.menu {
    right: 0;
    background: #45b29a;
    width: 60px;
    height: 60px;
    border-radius: 50%;
}

这是实际效果：

首先 header 的 position 是 fixed 这个前提不能改变， header 的高度是 100px，logo 和 menu 的高度都是 40px ，我想让它们垂直居中于 header ，所以我给他们加了 position: absolute;top: 50%; 和 transform: translate(0,-50%); 不用 margin 的原因是因为我想让它自适应 header 的高度来垂直居中，因为 header 在移动端的高度会变成 60px，logo 和 menu 的高度也会变成 40px，而如果用 margin 的话，在移动端还得重新设置一下 margin ，这样就不能自动适应垂直居中了，然后问题来了，我用 positoin 定位后，再分别对 logo 和 menu 使用 left: 0; 和 right: 0; 后，它们会脱离 contaier 的束缚，直接跑到 header 的两端（上图中的 logo 并没有跑到最左侧是因为没有给它加上 left: 0;）。

我一开始是这么想的，给这个 container 加上 position: relative; ,然并卵，它们的 top: 50%; 没用了：

.header .container {
    position: relative;
}

实际效果：

请问各位大神要怎么在不用 float 只用 position 的情况下使得 logo 和 menu 不脱离 container 呢（就是 logo 在图片一中的原来位置，menu 在图片一中的红色圆圈位置）。

想要的位置效果：

Answer 1

你给container加个height:100%，然后如同你说的那样，设置container的position:relative

Answer 2

可以使用margin-top的属性，到时候你再通过@media screen and (max-width: xxxpx) {}把margin-top大小改掉