作者:中国地产人 | 来源:互联网 | 2023-05-19 11:12
我坚持这个.
我想垂直居中一个div.它的父母有一个未知的高度,但它确实有一个最小高度.
我怎样才能做到这一点?
1> Marc Audet..:
这是使用CSS3转换属性的一种方法.
使用绝对定位将子元素的上边缘从顶部放置50%,然后使用它transform: translateY(-50%)
来调整孩子的高度.
.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;
}
child
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.