css - transform：translate（-50％， - 50％）;不与职位合作：亲属

我试图将一个跨度放在div元素中。我有以下代码：

<!DOCTYPE html>
<html>
    <head>
        <style>
        .parent {
            border: 1px solid red;
            height: 100px;
            width: 200px;
             position: relative;
        }
        .child {
            border: 1px solid green;
            position: relative;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        </style>
    </head>
    <body>
        <div class="parent">
            <span class="child">This is a span.</span>
        </div>
    </body>
</html>

跨度并非真正以div为中心。但是，当我申请时：

position: absolute;

在.child css风格上，它有效。这背后的原因是什么？

transform：translate（-50％， - 50％）;不与职位合作：亲属

0 个答案: