居中垂直浮动 div答案

【问题标题】：Center vertically floating divs居中垂直浮动 div
【发布时间】：2017-02-03 23:09:57
【问题描述】：

我需要将垂直浮动的 div 和图像置于其容器的中心。我尝试了很多方法，但没有一个能正常工作。

http://codepen.io/catapanoa/pen/ygaKLy?editors=1100

      <div class="leftWrapper">
        <div class="title">
           Title 1<br>
           <span class="subtitle">Subtitle 1</span>
         </div>
      </div>
.
.
.

【问题讨论】：

你能提供更多细节吗？

标签： html css css-float

【解决方案1】：

这是垂直居中内容的最佳方式

.vert-center {
    margin-top: 50%;
    translate: transform-y(-50%);
}

【讨论】：

【解决方案2】：

.wrap { position:relative; }
.center {
width:100%;
height:100%;
top:0;
right:0;
left:0;
bottom:0;
display:flex;
position:absolute;
text-align:center;
align-items:center;
justify-content:center;
}



<div class="wrap">

    <div class="center">

        <div>

            <h1>Title</h1>

            <span>span</span>

        </div>

    </div>

</div>

【讨论】：

【解决方案3】：

.title 
{
  border: 1px solid green;
   position: relative;
   top:50%;
   transform: translateY(-50%);
}

【讨论】：