在容器div中将2个div分开居中

Question

我正在寻找解决此问题的方法： 我有一个容器div，它的高度/宽度从它内部的div / img获得动态高度。 在那个容器里面我想添加另一个方形div 72x72px，它将水平和垂直居中。

css解决方案是首选

感谢您的帮助

当前的html：

<div class="post">
    <div class="post-like"></div>
    <img src="dsada"/>
</div>

当前少：

.post:before{
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
  background: #808080; width: 5px;
}

    .post{
  background:  @white;
  direction: rtl;
  overflow: hidden;
  width: 42%;
  margin-left: 2%;
  margin-right: 2%;
  margin-top: 4%;
  position: relative;
  text-align: center;
  white-space: nowrap;
img{
display: inline-block;
vertical-align: middle;
width: 100%;
}
 .post-like
    display: inline-block;
    vertical-align: middle;
    opacity: 1;
    cursor: pointer;
    height: 72px;
    width: 72px;
    border-radius: 50%;
    background: rgba(0,0,0,0.7);

    }

Answer 1

这个案例有一个非常古老的技巧

http://jsfiddle.net/9x1zLhz8/

HTML

<div class="container">
    <img src="http://placehold.it/200x500" alt="" />
    <div class="inner"></div>
</div>

CSS

.container {
    float: left;
    margin: 20px;
    position: relative;
}
.inner {
    background: #fff;
    border: 2px solid #333;
    width: 72px;
    height: 72px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -36px 0 0 -36px;
}

Answer 2

您可以使用display:table缩小内容（图像）上的div，然后使用旧的相对/绝对方式将内容放在图像上。

.ib {
  display:table;
  margin:auto;
  position:relative;
}
.top {
  z-index:1;
  position:absolute;
  top:50%;
  left:50%;
  background:rgba(255,255,255,0.75);

}
.h72.w72.center {
  height:72px;
  width:72px;  
  margin:-36px;
}
picture,legend {
  box-shadow:0 0 5px, inset 0 0 2px;
  text-align:center;
}
picture img {
  display:block;
}
/* extra if understood by browser*/
.flex {
  display:flex;
  flex-direction:column;
  justify-content:center;
}

<picture class="ib">
  <img src="http://lorempixel.com/200/400"/>
  <legend class="h72 w72 center top flex">
    center top layer
  </legend>
</picture>

Codepen to play with