垂直居中div取决于内容

Question

您好我有一个关于垂直居中div的问题.让我用一些代码解释一下.我有以下HTML代码:

<div class="container">

    <div class="wrapper">
      <div class="content">
          <h3>Lorem ipsum dolor sit amet, consectetur</h3>
          <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
              </p>
      </div>
      <div class="button_wrapper">
          <a class="button" href="#"></a>
      </div>
    </div>

    <!-- LARGE CONTENT -->
    <div class="wrapper">
      <div class="content">
          <h3>Lorem ipsum dolor sit amet, consectetur</h3>
          <p>
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi scelerisque porta cursus. Fusce ut nisi eget enim vestibulum pulvinar ac vehicula purus
              </p>
      </div>
      <div class="button_wrapper">
          <a class="button" href="#"></a>
      </div>
    </div>

</div>

如果你看看我的DEMO,你会发现黄色的div是浮动的,这正是我想要的.

我想要实现的是以下设置:

我尝试了几个方法,比如将填充/边距设置为感知数字,但这不起作用.只有CSS才有可能吗？

Answer 1

改变一些css属性

.wrapper {
  position: relative;
    background-color: #eeeeee;
    float: left;
    margin-bottom: 20px;
    padding: 10px 10px;
    clear: both;
    width: 100%;
}
.button_wrapper {
    background-color: yellow;
    float: left;
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 10%;
}

https://jsfiddle.net/wvd9pddg/2/