html登录框上下居中,登录页面登录框居中

头部...

内容内容内容内容内容内容

底部。。。

.HolyGrail {

display: flex;

min-height: 100vh;

flex-direction: column;

}

header, footer {

height:80px;

line-height: 80px;

text-align:center;

background-color:#000;

color:#fff;

}

.HolyGrail-body {

display: flex;

flex: 1;

align-items: center;

}

.HolyGrail-body div{

padding:35px 40px;

margin:auto;

border-radius:6px;

background-color:rgba(255,235,255,0.6);

}

@media (max-width: 768px) {

.HolyGrail-body {

flex-direction: column;

flex: 1;

}

.HolyGrail-nav,

.HolyGrail-ads,

.HolyGrail-content {

flex: auto;

}

}

标签：居中,flex,登录,color,body,height,内容,HolyGrail,页面

来源： https://www.cnblogs.com/linjiu0505/p/10579261.html