【已解决】align-items:center失效,无法垂直居中问题!

如果你的父元素没有高度,那么子元素不会垂直居中问题。
由于之前设置了父元素高度是100%,但是怎么样子元素都不上下居中,但是左右居中了。
例如我的父元素是:

<div class="logincontainer ">
<div class="form">我是子元素div>
div>
.logincontainer {
    height: 100vh;//注意,如果没有这个或者你设置的是100%,很有可能垂直居中不生效
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
}

子元素

    .form {
        height: 350px;
        width: 400px;
        padding: 2% 3%;
        box-shadow: 0px 0px 8px 0 rgba(85, 85, 85, 0.37);
    }

解决方案,注意将父元素设置高度,还有如果是单独页面,设置高度为100vh
【已解决】align-items:center失效,无法垂直居中问题!_第1张图片

你可能感兴趣的:(vue技术栈,css,前端,css3)