(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>

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

(CSS) Align div elements from center to left

html

css

center

alignment