中心垂直浮动的div

时间:2017-01-16 09:14:37

标签: html css css-float

我需要将垂直浮动的div和图像居中放置到容器中。我尝试了很多方法,但都没有效果。

Something like this

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>
.
.
.

3 个答案:

答案 0 :(得分:0)

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

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

答案 1 :(得分:0)

.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>

答案 2 :(得分:0)

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