在容器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一起玩