在另一个浮动div中居中水平绝对div

Question

我有以下标记：

.container {
  top: 50px;
  width: 800px;
  height: 300px;
  background-color: red;
  position: relative;
  text-align: center;
}
.left {
  width: 500px;
  height: 100%;
  background-color: black;
  float: left;
}
.right {
  width: 200px;
  height: 100%;
  background-color: green;
  float: right;
}
.messageWrapper {
  overflow: hidden;
  bottom: 0;
  max-height: 100%;
  min-height: 20px;
  position: absolute;
  width: 170px;
}
.message {
  min-height: 20px;
  background-color: yellow;
  margin-left: 5px;
  margin-right: 5px;
  margin-bottom: 5px;
}

<div class="container">
  <div class="left">
    ...
  </div>

  <div class="right">
    <div class="messageWrapper">
      <div class="message"></div>
    </div>
  </div>
</div>

这会产生以下结果：

我要做的是将绿色的yellou div水平居中。它应该保持在相同的垂直位置，但是向右移动以在绿色div中居中。

这个问题得到越来越多的支持。我要求所有downvoters在这个问题下发表评论。这太荒谬了。这个问题出了什么问题？

Answer 1

这些是您需要更改的css元素：

.right {
    width: 200px;
    height: 100%;
    background-color: green;
    float: right;
    position: relative; //here
}
.messageWrapper {
    overflow: hidden;
    bottom: 0;
    max-height: 100%;
    min-height: 20px;
    width: 170px;
    text-align: center; //here
    width: 100%; //here
    position: absolute;  //here
}

.message {
    min-height: 20px;
    background-color: yellow;
    margin-left: auto; //here
    margin-right: auto; //here
    margin-bottom: 5px;
    width: 80%; //here
}

还有一个工作小提琴：http://jsfiddle.net/a1Lp2o52/