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

标签 css center vertical-alignment

我卡在这个了。

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

我该怎么做?

最佳答案

这是使用 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>

关于css - 在设置了自动高度和最小高度的父项中垂直对齐 div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28890459/

相关文章:

css - 输入元素中的文本垂直居中

html - 将 Bootstrap 导航栏与屏幕底部中心对齐 - 登录页面

html - 如果图像已加载或是否正在显示,如何使用 css 检查?

css 旋转背景从中间到 Angular 落

html - 在两个并排的表格之间放置一个分隔符/分隔符

html - 将父 div 与动态和设置宽度子 div 居中

html - 在 div 中居中图像而不裁剪图像和 overflow hidden

jquery - 用 jQuery 居中 div

css - 嵌套div垂直对齐问题

jquery - Owl Carousel - 自动宽度,最后一项从堆栈中拉出