如何使用垂直对齐:居中;在我的代码中正确地(或者在不使用position:absolute的情况下找到更好的解决方案)

Question

这是我的代码：

<div class="container"> 
            <div class="text floatLeft">
                <h1> <span class="babyblue">App Store</span> Optimization</h1>
                <p>Over 60% of all app downloads come from search and the average app barel scratches the surface of this explosive channek. Can your app be found? </p>
            </div>
            <img src="http://example.com/wp-content/themes/twentyfifteen/images/OPTIMIZATION.png" class="floatRight">
        </div>

我一直在尝试垂直对齐"text"类，但没有成功。

我试着在父类（.contator）上使用display: table;，在文本类上使用display: table-cell，但没有任何结果。我不知道是不是因为我用的是5，vh，vw而不是px。。无论如何，我需要将文本类垂直居中。

我尝试将position: relative与top: 50%一起使用，但没有任何更改。

如果没有position: absolute属性，有什么方法可以做到这一点吗？

我当前的CSS:

.part2 {
width: 100%;
height: 100%;
background-color: #fff;
position: relative;
padding-top: 15%;
display: table;
}
.part2 .container {
width: 70%;
margin: 0 auto;
/* height: 40%; */
display: table;
margin-bottom: 7vh;
}
.part2 .text {
}

jsfiddlehttp://jsfiddle.net/jzhprfc4/

Answer 1

这可以是的解决方案

.cf:before,
.cf:after {
    content: " ";
    display: table;
}
.cf:after {
    clear: both;
}
.floatLeft {
    float: left;
}
.floatRight {
    float:right;
}
.container {
    position: relative;
    display: table;
}
.text {
    display: table-cell;
    background: yellow;
    vertical-align: middle;
}

<div class="container cf"> 
            <div class="text ">
                <h1> <span class="babyblue">App Store</span> Optimization</h1>
                <p>Over 60% of all app downloads come from search and the average app barel scratches the surface of this explosive channek. Can your app be found? </p>
            </div>
            <img src="http://placehold.it/350x350" class="floatRight">
  </div>

Answer 2

在这里我更新您的CSS:

.text {
    position:relative;
    top:50%;
}
.container{
    clear:both;
    height:900px;
}

同时检查：Fiddle

Answer 3

 .text {
    display:table-cell;
    text-align:center;
    vertical-align: middle;
    border:1px solid #000;
    
    
   
}
 .text img{
     width:200px;
    display:inline-block;
    height:200px;
}
 
.container{
    vertical-align:middle;
    width:100%;
    display:table;
}

<div class="container"> 
            <div class="text">
                <h1> <span class="babyblue">App Store</span> Optimization</h1>
                <p>Over 60% of all app downloads come from search and the average app barel scratches the surface of this explosive channek. Can your app be found? </p>
            </div>
    <div class="text">
            <img src="http://placehold.it/350x350g" alt="this is image" class="">
        </div>
    </div>
            
        </div>