css - 在设置了自动高度和最小高度的父项中垂直对齐 div？

Question

我卡在这个了。

我想将一个 div 垂直居中。它的父项有一个未知的高度，但是，它确实有一个最小高度。

我该怎么做？

Answer 1

这是使用 CSS3 转换属性的一种方法。

使用绝对定位将子元素的上边缘放置在距离顶部 50% 的位置，然后使用 transform: translateY(-50%) 调整 child 的高度。

.parent {
    height: auto;
    min-height: 200px;
    border: 1px dotted gray;
    position: relative;
}
.child {
    border: 1px dotted blue;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}
.content {
    margin-left: 100px;
    margin-right: 400px;
}

<div class="parent">
    <div class="child">child</div>
    <div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer facilisis velit ut neque tempor quis cursus tortor suscipit. Curabitur rutrum magna vitae arcu pharetra eget cursus ante accumsan. Nunc commodo malesuada adipiscing. Pellentesque consequat laoreet sagittis. Sed sit amet erat augue. Morbi consectetur, elit quis iaculis cursus, mauris nulla hendrerit augue, ut faucibus elit sapien vitae justo. In a ipsum malesuada nulla rutrum luctus. Donec a enim sapien. Sed ultrices ligula ac neque vulputate luctus. Suspendisse pretium pretium felis, in aliquet risus fringilla at. Nunc cursus sagittis commodo.
    </div>
</div>