放置一个div中心，例如height：auto;

Question

我不敢相信我在问这个问题，但我有一个页面，其中在包装中心div内有一个带有4个框的div，在它旁边有内容的另一个div。 盒子永远不会改变大小，但是内容盒子会改变。 为了保持一致性，我希望将div的内容放在页面中间一半的中间，以便每当添加更多内容时，它始终位于该位置。 由于某种原因，我尝试了height / margin：auto和许多方法，但它似乎不会居中。

我在这里链接了一个简单的div布局示例以及每个div的样式示例，请认真告诉我这是我很容易错过的事情-确实很尴尬！

此处的所有代码： http : //jsfiddle.net/SBFrq/3/

eg 
<div class="wrapper">
    <div class="thumbnails">
        <div class="col-13">thumbnail1</div>
        <div class="col-13">thumbnail2</div>
        <div class="col-13">thumbnail3</div>
        <div class="col-13">thumbnail4</div>
    </div>
    <div class="content-wrapper">
        <div class="content">
            Content
       </div>
    </div>
</div>

谢谢

Answer 1

这些内联样式调整应该可以解决问题（如果我对您的了解很好）。

.content-wrapper的高度是一个粗略的估计，因此您需要对其进行调整。

<div class="wrapper">
    <div class="thumbnails">
        <div class="col-13">thumbnail1</div>
        <div class="col-13">thumbnail2</div>
        <div class="col-13">thumbnail3</div>
        <div class="col-13">thumbnail4</div>
    </div>
    <div class="content-wrapper" style="height: 500px; display: table; position: relative; overflow: hidden;">
        <div class="content" style="top: 50%;display: table-cell; vertical-align: middle;">
            <div style="position: relative; #top: -50%">
            ContentContentContent
            <br>ContentContentContent
            <br>ContentContentContent
            <br>ContentContentContent
            <br>ContentContent
            <br>ContentContentContent
            <br>ContentContent
            <br>ContentContentContent
            </div>
       </div>
    </div>
</div>