Scroll 滚动一个垂直居中的DIV，而不在同一框中滚动另一个DIV

整晚都在做这个，没想到会这么难。我的目标在这把小提琴里用文字解释，如果你想跳到这一步：

基本上，我希望一个浮动的、固定大小的证明框包含两个元素，

a.part

和

.full

，这两个元素都垂直居中，即使有多行。当

.full

溢出，导致滚动条时，我想滚动

.full

，而

a.part

保持垂直居中。我不能绝对定位零件，因为它需要以任何尺寸垂直居中。因此，我将

a.part

包装在一个绝对定位的元素中，但它会随着

.full

一起滚动。不，布埃诺

为了简单起见，我省略了一些元素，但如果有必要，我将使用jQuery同位素定位固定大小的框，并在hover上扩展框（宽度、高度、上边距和左边距更改）。因此，我很乐意在

.testional

中添加div，但我无法将

.testional

的内容进行包装（尽管我可以向其中添加类）。我开始探索涉及.hide（）和.offset（）的jQuery解决方案，但事情开始变得一团糟，特别是因为我大量使用CSS转换。所以我希望尽可能避免使用Javascript

以下是fiddle HTML：

<div class="box praise testimonial">
    <div class="abs1">
        <a class="part" href="#">stay vertically centered!<br/>even if you scroll!</a>
    </div>
    <div class="abs2">
        <div class="full">
            <p>This text is larger than its containing box, and I want a scrollbar to appear. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae nisl at justo sodales congue. Praesent sed arcu sit amet dolor molestie venenatis. Curabitur et consequat libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed posuere lectus nec est viverra faucibus scelerisque massa fermentum. Donec ultricies bibendum tincidunt. Sed sit amet mi massa, a egestas arcu. Maecenas vitae libero metus. Proin dolor lorem, molestie ut ullamcorper sit amet, varius sit amet urna. Nunc aliquet scelerisque dui, et tristique quam molestie vitae. Etiam ac justo sapien. Etiam ipsum ante, porttitor posuere placerat id, congue quis neque. Nunc et elementum odio. Sed vulputate semper erat, a lobortis dolor porttitor ut.</p>
        </div>
    </div>
</div>
<div class="box praise testimonial">
    <div class="abs1">
        <a class="part" href="#">stay vertically centered!<br/>even if you scroll!</a>
    </div>
    <div class="abs2">
        <div class="full">
            <p>this<br/>should<br/>stay<br/>centered<br/>too!</p>
        </div>
    </div>
</div>​

---

任何帮助都会赢得我永恒的感激。

试试看，它也可以将多行文字集中在图像上。

听起来（对我来说）还不清楚。你想要1。同位素。容器中的物品2。包含溢出。导致滚动条和3的完整内容（文本和图像）。在可滚动内容的顶部，您需要一些垂直和水平居中的粗体白色。部分文本不能滚动到下面的内容？因此，.full和.part必须都在同位素.item中，但是.part不能包含在.full中，否则它将滚动..part不包含在.full中，但它会滚动.full。这就是问题所在。我在下面的回答中为您解决了这一部分。谢谢。但是请注意第三个框：“这个文本比它的包含框短，应该垂直居中。”在这个更新中：是的，可能引入的水平滚动条的高度起了作用；）我认为我所要求的在CSS中是不可能的。但是非常感谢你的帮助！我只是想在我的设计中去掉滚动条。好吧，它确实按照你最初的问题工作，不是吗？现在您所需要的只是一个类，它将滚动条的高度考虑到没有溢出内容的元素上。您可以硬编码，也可以通过一点jQuery动态地完成；但那将是另一个主题…不，因为。艺术品和标题都需要垂直居中。如果我添加

显示：表格单元格；垂直对齐：中间对齐到.artwork，它居中，但如果太大，则会溢出盒子。但是，除非你愿意，否则不要在上面花费时间；我在设计中放弃了滚动条的概念，所以这个问题不需要解决。
body {
    color: #fff;
}
a { color: #fff; font-size: 18px; font-weight: bold; text-decoration: none; }
.box {
    display: inline-block;
    position: relative;
    float: left;
    overflow: hidden;
    margin: 20px;
    background: #777;
}
.testimonial, .testimonial .abs1, .testimonial .abs2, .testimonial a.part, .testimonial .full {
    height: 250px;
    width: 250px;
}
.testimonial:hover {
    overflow: auto !important;
}
.testimonial a.part {
    display: table-cell;
    vertical-align: middle;
    text-align: right;
}
.testimonial .abs1 {
    position: absolute;
    top: 0;
    left: 0;
}
.testimonial .abs2 {
    position: absolute;
    top: 0;
    left: 0;
}
.testimonial .full {
    display: table-cell;
    vertical-align: middle;
    opacity: 0.5
}