html怎么定位布局位置,CSS的position定位布局问题

HTML部分

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 在图片一中的红色圆圈位置)。

想要的位置效果：