父元素高度已知，子元素高度未知的情况下，无法通过如下position设置垂直居中，为什么？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .parent{border: 1px solid red;width: 500px;height: 400px;position: relative;}
        .content{position: absolute;top:50%;left:50%;}
        .text{border:1px solid green;position:relative;top: -50%;left:-50%;}
    </style>
</head>
<body>
<div class="parent">
    <div class="content">
        <div class="text">发链接都是金粉世法国代电饭锅<br>家发的设计<br>费放松放松<br>sfljsljfs</div>
    </div>
</div>
</body>
</html>

效果图
图片描述

css 垂直居中

阅读 3.1k

3 个回答

不知道如下是不是您想要的效果

    .parent{border: 1px solid red;width: 500px;height: 400px;position: relative;}
    .content{position: absolute;top:50%;left:50%;transform: translate(-50%,-50%);}
    .text{border:1px solid green;}