如何在另一个固定高度div内垂直对齐动态高度div

Question

我遇到了一个CSS难题，我正在寻找以下技巧的最佳解决方案：

<div class="vertical-wrapper">
    <div class="vertical-content">
        Variable length of text which can be multiple lines
    </div>
</div>

我想在中间对齐'vertical-content'，无论它通过文本行的高度是多少。这是拼图提供的css代码：

.vertical-wrapper{
width: 220px;
min-height: 220px;
background: #red;
overflow: auto;
}
.vertical-content{
    background: #green;
    margin: 10px;
    padding: 5px;
}

，这是jsfiddle。

Answer 1

您可以使用inline-flex显示。这是正确的CSS：

.vertical-wrapper{
    display: inline-flex;   /*a minor change here*/
    width: 220px;
    min-height: 220px;
    background: #cf0000;
    overflow: auto;
}   
   
.vertical-content{
        background: #fff;
        margin: auto 10px;  /*and here*/
        padding: 5px;
    }
}

jsfiddle

Answer 2

我将上面的一些答案和我自己的一些研究结合在一起，我找到了答案，谢谢你们！

HTML代码

<div class="vertical-wrapper">
    <div class="vertical-content">
        Variable length of text which can be multiple lines.<br />
        Variable length of text which can be multiple lines.<br />
        Variable length of text which can be multiple lines.<br />Good luck!
    </div>
</div>

CSS代码

.vertical-wrapper{
width: 220px;
height: 220px;
background: #cf0000;
overflow: auto;
position: relative;
}

.vertical-content{
position: absolute;
top: 50%;
left:10px;
right:10px;
background: #fff;
padding: 5px;
transform: translateY(-50%);
}

Answer 3

您在min-height上设置.vertical-wrapper，然后overflow:auto。如果你设置一个固定的高度，而且文字太大，它仍会变得更高并达到同样的效果。

高度固定后，您可以使用display:table-cell和vertical-align:middle垂直对齐div，如this answer中所述。

＆＃13;

＆＃13;

.vertical-wrapper{
    width: 220px;
    height: 220px;
    background: #cf0000;
    overflow: auto;
    display:table-cell;
    vertical-align:middle;
}

.vertical-content{
    background: #fff;
    margin: 10px;
    padding: 5px;
}

＆＃13;

<div class="vertical-wrapper">
    <div class="vertical-content">
        Variable length of text which can be multiple lines.<br />Good luck!
    </div>
</div>

<hr/>

<div class="vertical-wrapper">
    <div class="vertical-content">
        Variable length of text which can be multiple lines.<br />Good luck!
        <p>Variable length of text which can be multiple lines.<br />Good luck!</p>
        <p>Variable length of text which can be multiple lines.<br />Good luck!</p>
        <p>Variable length of text which can be multiple lines.<br />Good luck!</p>
        <p>Variable length of text which can be multiple lines.<br />Good luck!</p>
        <p>Variable length of text which can be multiple lines.<br />Good luck!</p>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

一种解决方案是将其Y-axis转换为-50%，然后将margin-top: 50%应用于.vertical-content。

Fiddle

＆＃13;

＆＃13;

.vertical-wrapper {
  width: 220px;
  min-height: 220px;
  background: #cf0000;
  overflow: auto;
}
.vertical-content {
  background: #fff;
  margin: 10px;
  padding: 5px;
  margin-top: 50%;
  transform: translateY(-50%);
}

＆＃13;

<div class="vertical-wrapper">
  <div class="vertical-content">Variable length of text which can be multiple lines. Variable length of text which can be multiple lines.
    <br />Good luck!</div>
</div>

＆＃13;

＆＃13;

＆＃13;