我知道垂直对齐很棘手,并且有很多关于堆栈溢出的问题......我一直试图解决这个问题几个小时,没有成功,所以决定问它(道歉是否是一个重复)
我已经为我的网站创建了一个登录页面。
正文中有两个主要的div,一个用于徽标,另一个用于登录内容。登录内容有2个部分,一个用于电子邮件和密码,另一个用于社交媒体登录。
<body>
<div>
My Logo goes here
<div>
<div>
<section id="loginForm"></section>
<section id="SocialLoginForm"></section>
</div>
</body>
有没有办法让登录div始终垂直居中?我希望徽标保持在顶部,但登录div是垂直居中的。 我知道我可以为div指定一个高度并将其内容放在中心,但我不知道如何确定屏幕尺寸会改变的高度......
这就是它的样子,你可以看到底部有一个很大的差距。
答案 0 :(得分:2)
您可以像这样尝试flex:
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%;
}
&#13;
<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>
&#13;
答案 1 :(得分:2)
您有几个显示选项:
display:table
(ie8及以上)
html,
body {
height: 100%;
width: 100%;
}
body {
display: table;
margin: 0;
}
body>div {
display: table-row;
}
body>div+div {
display: table-cell;
height: 100%;
vertical-align: middle;
text-align:center;
}
<div>
My Logo goes here
</div>
<div>
<section id="loginForm">lg form</section>
<section id="SocialLoginForm">socl form</section>
</div>
display:flex;
body {
margin: 0;
height: 100vh;
display: flex;
flex-direction: column;
}
div+div {
margin: auto;
}
<div>
My Logo goes here
</div>
<div>
<section id="loginForm">lg form</section>
<section id="SocialLoginForm">socl form</section>
</div>
display:grid;
body {
height: 100vh;
margin:0;
display: grid;
grid-template-rows: auto 1fr;
}
div+div {
margin: auto;
}
<div>
My Logo goes here
</div>
<div>
<section id="loginForm">lg form</section>
<section id="SocialLoginForm">socl form</section>
</div>
所有display
方法都需要设置height
的容器。
也可以使用transform
,absolute
,inline-block
的方法,但现在不需要使用技巧;)
答案 2 :(得分:1)
body, html{
display:table;
height:100%;
width:100%;
}
.my-container{
display:table-cell;
vertical-align:middle;
}
.my-container .your-div{
width:150px;
height:150px;
border:1px solid #e3e3e3;
margin:0 auto;
}
&#13;
<html>
<body>
<div class="my-container">
<div class="your-div">
<div>My Logo goes here<div>
<div>
<section id="loginForm">loginForm</section>
<section id="SocialLoginForm">SocialLoginForm</section>
</div>
</div>
</div>
</body>
</html>
&#13;
答案 3 :(得分:0)
如果您不介意使用Sass等预处理器。我建议使用这样的mixin:
@mixin center($axis: "both") {
position: absolute;
@if $axis == "y" {
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
top: 50%;
transform: translateY(-50%);
}
@if $axis == "x" {
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
left: 50%;
transform: translateX(-50%);
}
@if $axis == "both" {
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
}
body {
position: relative;
.inner-div {
@include center(); //both horizontaly and vertically pass 'x' or 'y' to center veritcally or horizontal
}
}