垂直居中页面上的父div [英] Vertically center parent div on page
问题描述
我知道垂直对齐很棘手，在stackoverflow上有很多关于它的问题......我一直试图弄清楚这几个小时，没有成功，所以决定问它（道歉，如果它是一个复制）
我为我的网站创建了一个登录页面。
主体中有2个主div ，一个用于标识，另一个用于登录内容。登录内容有两个部分，一个用于电子邮件和密码，另一个用于社交媒体登录。
< body>
< div>
我的标志在这里
< div>
< div>
< section id =loginForm>< / section>
< section id =SocialLoginForm>< / section>
< / div>
< / body>
有没有办法让登录div垂直居中？我希望徽标保持在顶部，但登录div垂直居中。 我知道我可以为div分配高度，并将其作为内容的中心，但我不知道如何确定高度，因为屏幕大小会发生变化......
这就是它的样子，因为你看到底部有一个很大的差距。
您可以尝试这样的flex：
body {margin：0; padding：0;} * {box-sizing：border-box;}。container {display：flex; flex-direction：列;身高：100vh; text-align：center;}。logo {border：1px solid red; min-height：30px;}。login {flex：1;边框：1px纯红色;显示：flex; flex-wrap：wrap; align-content：center;}＃loginForm，＃SocialLoginForm {min-height：45px;边框：1px纯绿色; flex：0 0 100％;}
< div class = 容器 > < div class =logo>我的徽标出现在这里< / div> < div class =login> < section id =loginForm>登录内容< / section> < section id =SocialLoginForm>社交登录内容< / section> < / div>< / div>
I know vertical alignment is tricky and there are plenty of questions about it on stackoverflow... I have been trying to figure this out for a few hours, with no success, so decided to ask it (apologies if it is a duplicate)
I have created a login page for my website.
There are 2 main divs in the body, one for logo and one for login content. The login content, has 2 sections, one for email and password and one for social media login.
<body>
<div>
My Logo goes here
<div>
<div>
<section id="loginForm"></section>
<section id="SocialLoginForm"></section>
</div>
</body>
Is there a way to always vertically center the login div? I want the logo to stay on the top, but the login div be vertically centered. I know I can assign a height to the div and center it's content, but I don't know how to determine the height as the screen size will change...
this is how it looks like, as you see there is a big gap at the bottom.
You can try flex like this :
body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
.container {
display: flex;
flex-direction: column;
height: 100vh;
text-align:center;
}
.logo {
border: 1px solid red;
min-height: 30px;
}
.login {
flex: 1;
border: 1px solid red;
display: flex;
flex-wrap: wrap;
align-content: center;
}
#loginForm,
#SocialLoginForm {
min-height: 45px;
border: 1px solid green;
flex: 0 0 100%;
}
<div class="container">
<div class="logo">
My Logo goes here
</div>
<div class="login">
<section id="loginForm">Login content</section>
<section id="SocialLoginForm"> social login content</section>
</div>
</div>
这篇关于垂直居中页面上的父div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
