Question

我有以下HTML标记：

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

这是我的CSS：

div.custom-alert-window{
    z-index: 100;
    width: 30%;
    border: 1px solid grey;
    border-radius: 7px;
    background-color: #FFF;
    height: 5%;
    position: absolute;
    bottom: -156px;
    margin-left: 37.5%;
    text-align: center;
    padding: 5px;
}
div.custom-alert-window > span{
    margin: 0px;
    padding: 0px;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

但由于某种原因，<span>不是垂直居中的。它确实从顶部定位了50％，但transform: translateY(-50%);函数由于某种原因不起作用。

Answer 1

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

JSFiddle

＆＃13;

div.custom-alert-window {
    width: 30%;
    height: 10%;
    border: 1px solid grey;
    border-radius: 7px;
    background-color: #FFF;
    text-align: center;
    padding: 5px;
    
    /* vertical centering */
    position: absolute;
    z-index: 100;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    
    /* horizental centering */
    margin:0 auto;
    left: 0;
    right: 0;
}

div.custom-alert-window span {
    /* vertical centering */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

＆＃13;

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

＆＃13;

Answer 2

出于某种原因，当我将span的位置更改为absolute时，它有效。

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

垂直居中在CSS中不起作用？

2 个答案: