居中3个动态高度不正常的div

Question

子div必须垂直和水平居中。

父高度必须是自动且溢出的孩子。

我尝试过absulote和亲戚，看了很多例子，没有什么能适合我的情况。

http://jsfiddle.net/uLktmwe3/4/

<div class="par1">paragraph1 paragraph1 paragraph1</div>
<div class="par2">paragraph2 paragraph2 paragraph2</div>
<div class="par3"> 

par3可以有很多行，因此父母的身高将与他相关。

预期结果：

Answer 1

你想要吗？

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.frame {    
    border: 2px solid #918c91;    
    width: 100%;    
   padding: 10px;  
    border-radius: 28px;
    -moz-border-radius: 28px;
    -webkit-border-radius: 28px;
}
.par1,
.par2,
.par3{
    display: inline-block;
    vertical-align: middle;
    padding: 5px;
    border: 1px solid #000;
    width: 20%;
    margin: 0 1%;
}
.par3{   
    width: 54%;
}

<div class="frame">
            
                <div class="par1">paragraph1 paragraph1 paragraph1</div><!--
                --><div class="par2">paragraph2 paragraph2 paragraph2</div><!--
                --><div class="par3">                 paragraph3paragraph3paragraph3p aragraph3paragraph3paragraph 3paragraph3paragraph3paragraph3paragraph3  paragraph3paragraph3paragraph 3paragraph3paragraph3paragraph3pa ragraph3paragraph3paragraph3paragraph3  paragraph3paragraph3paragra ph3paragraph3paragraph3paragrap h3paragraph3paragraph3par agraph3paragraph3
     </div>
           
        </div>

Answer 2

请检查以下代码 css： -

    .frame {
    float:left;
    border-radius: 28px 28px 28px 28px;
    -moz-border-radius: 28px 28px 28px 28px;
    -webkit-border-radius: 28px 28px 28px 28px;
    border: 2px solid #918c91;
    width:90vw; height:auto; display:inline-block; vertical-align:top;  word-wrap:break-word; overflow: hidden;
}

.par1{
    float:left;
    width: 80px;
    height: 45px;
    /* top: 50%; */    
    /* transform: translateY(-50%); */
    display: inline-block;
    vertical-align: top;
    margin-left: 20px;
    padding-left:35px;
}

.par2{
    float:left;
    width: 80px;
    height: 63px;
    margin: 0 auto;
    position: relative;
    /* top: 50%; */
    /* transform: translateY(-50%); */
    padding-left:55px;
    padding-right:55px;
    display: inline-block;
    vertical-align: top;
}

.par3{
    float:left;
    position: relative;
    width: 10vw;
    display: inline-block;
    vertical-align: top;
    margin-right:20px;
    padding-left:55px;
}


http://jsfiddle.net/uLktm

WE3 / 5 /