Css Top：50%的人什么都不做

试着自学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>

.main侧边栏{
显示：内联块；
左缘：5%；
边缘顶端：2rem；
最小宽度：25%；
高度：9雷姆；
背景色：rgb（97160108）；
颜色：#fff；
}
.侧边栏内容{
文本对齐：居中；
最高：50%；
转化：translateY（-50%）；
位置：绝对位置；
}
无用的信息在这里！

---

谢谢大家

您在

.main侧边栏的样式中缺少这一行：

position: relative;

看到它了吗？你还写道：

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


无用的信息在这里！

侧边栏不是标准（语义）HTML元素。您没有提到正在使用的任何框架或库，因此要修复此问题，请尝试使用div、nav或aside来完成您尝试执行的操作，然后给它一个类或侧边栏id

top:50%;

是从网页高度。如果更改浏览器大小，可以看到它正在上下移动，因为它是
position:absolute这意味着它不在乎它属于哪里

如果使
显示：相对可以从父块控制其位置

检查：


.main侧边栏{
显示：内联块；
左缘：5%；
边缘顶端：2rem；
最小宽度：25%；
高度：9雷姆；
背景色：rgb（97160108）；
颜色：#fff；
}
格林布洛克先生{
文本对齐：居中；
最高：50%；
转化：translateY（-50%）；
位置：相对位置；
}

无用的信息在这里！
是否尝试在.main滑块中垂直居中放置文本？如果是这样，您需要添加位置：相对于.main侧边栏。正如您的代码现在所显示的那样，您正在将文本从浏览器视图端口顶部居中50%。