css - 顶部 : 50% Does Nothing

Question

尝试自学 CSS。我正在尝试垂直居中文本，但在线示例都使用 top:50% 这对我不起作用。这是 CSS:

    .mainSidebar {
            display: inline-block;
            margin-left: 5%;
            margin-top: 2rem;
            min-width: 25%;
            height: 9rem;
            background-color: rgb(97, 160, 108);
            color: #fff;
        }

        .sidebarContent {
            text-align: center;
            top: 50%;
            transform: translateY(-50%);
            position: absolute;
        }

    <sidebar class="mainSidebar">
            <div class="sidebarContent">Useless info here!</div>
    </sidebar>

谢谢大家!

Answer 1

.mainSidebar 的样式中缺少这一行:

position: relative;

查看on this fiddle