Html 垂直居中不'；你不能用CSS吗？

我有以下HTML标记：

<div class="custom-alert-window" id="alert-window">
    <span id="alert-window-text">Hi!</span>
</div>

---

但是由于某些原因，

没有垂直居中。它确实将自身定位在距离顶部50%的位置，但是

转换：translateY（-50%）函数由于某种原因无法工作。
由于某种原因，当我将
span
的位置更改为
绝对值时，它工作了

div.custom-alert-window > span{
    position: absolute;
}

该元素需要相对于其父元素垂直居中，如果希望该元素在整个页面中垂直居中，请确保它没有包装在具有非静态定位的容器中。否则，图元将相对于其父高度垂直居中



div.custom-alert-window{
宽度：30%；
身高：10%；
边框：1px纯灰；
边界半径：7px；
背景色：#FFF；
文本对齐：居中；
填充物：5px；
/*垂直定心*/
位置：绝对位置；
z指数：100；
最高：50%；
转化：translateY（-50%）；
-webkit转换：translateY（-50%）；
/*水平定心*/
保证金：0自动；
左：0；
右：0；
}
div.custom-alert-windowspan{
/*垂直定心*/
位置：绝对位置；
最高：50%；
转化：translateY（-50%）；
-webkit转换：translateY（-50%）；
}

你好
谢谢，但需要在内部垂直居中，这仅在的位置为绝对位置时有效。这是因为默认情况下，
span
是一个
内联
标记，将其设置为
display:block将使
位置：相对
工作。见：
div.custom-alert-window > span{
    position: absolute;
}