(CSS) 将 div 元素从中心向左对齐

Question

我正在尝试使一个 div 元素居中并使其他元素像这样从他向左浮动：

在此代码中，宽度和高度设置为 px，但在我的中，它的单位为 %。所以我不知道中心在哪里。所以它必须随着不同的分辨率而改变。 我不想把它放在另一个 div 中并居中，因为它使两个 div 居中，我只希望黄色居中。

除了在左侧放置另一个与绿色高度相同的空div并使其不可见之外，还有其他解决方案吗？

.container{
    background-color:#34495e;
    width: 500px;
    height: 200px;
    padding: 10px;
}

.in-center{
    background-color:#f1c40f;
    width: 40%;
    height: 100%;
    display: inline-block;
}

.to-left{
    background-color:#2ecc71;
    width: 20%;
    height: 100%;
    display: inline-block;
}

<div class="container">
        <div class="in-center"></div>
        <div class="to-left"></div>
</div>

Answer 1

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.container {
  background-color: #34495e;
  width: 80%;
  height: 200px;
  text-align: center;
  position: relative;
}
.in-center {
  background-color: #f1c40f;
  width: 40%;
  height: 100%;
  display: inline-block;
}
.to-left {
  background-color: #2ecc71;
  width: 20%;
  height: 100%;
  display: inline-block;
  position: absolute;
}

<div class="container">
  <div class="in-center"></div>
  <div class="to-left"></div>
</div>