html div页面上下居中代码,关于html：将页面上的div垂直居中

我知道垂直对齐是棘手的，并且在stackoverflow上有很多关于它的问题...我一直试图解决这个问题几个小时，但没有成功，所以决定问一下(抱歉，如果重复的话)

我已经为我的网站创建了一个登录页面。

主体中有2个主要div，一个用于徽标，一个用于登录内容。 登录内容有2个部分，一个部分用于电子邮件和密码，另一个部分用于社交媒体登录。

My Logo goes here

有没有办法始终使登录div垂直居中？ 我希望徽标保留在顶部，但登录div垂直居中。 我知道我可以为div分配一个高度并将其居中放置，但是我不知道如何确定高度，因为屏幕尺寸会发生变化...

如您所见，底部是一个很大的缺口。

如果您能为我们提供一个工作摘要，那会更好

@Swellar，谢谢您的评论。 它带有相当大的CSS，要提取其要点并不容易，我无法在此处发布整个内容。 我希望有人可以引导我找到将父div放在页面中心的正确方法吗？

css-tricks.com/centering-css-complete-guide，这可能对您有所帮助。

您是否尝试使用padding？

@KhatamNaayak：谢谢，不，我没有尝试过填充，我该怎么做？

@sarhang，请按照以下步骤操作：w3schools.com/css/css_padding.asp

您有几个显示选项：

display:table(即8以上)

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;

}

My Logo goes here

lg form

socl form

display:flex;

body {

margin: 0;

height: 100vh;

display: flex;

flex-direction: column;

}

div+div {

margin: auto;

}

My Logo goes here

lg form

socl form

display:grid;

body {

height: 100vh;

margin:0;

display: grid;

grid-template-rows: auto 1fr;

}

div+div {

margin: auto;

}

My Logo goes here

lg form

socl form

所有display方法都需要一个设置了height的容器。

也可以使用transform，absolute，inline-block的方法，但是现在不需要使用技巧了；)

谢谢，如果我想使用第一种方法，那么是否必须在身体上设置display：table？还是可以定义一个将所有内容包裹在体内的div并将display：table分配给该div？

@Sarhang，您可以使用body或其他标签，它仍然是标签。显示屏将重置为任何标签。当然，如果您对包装纸有信心，或者可以在其后添加更多内容，则可以使用包装纸。

您可以这样尝试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%;

}

My Logo goes here

Login content

social login content

谢谢，如果我使用此方法，那么我是否需要知道屏幕的高度并将其设置在.container上？

@Sarhang，您不必知道高度;)因为我使用了100vh，所以它将是自动的

@Sarhang使用100vh将使其占据整个屏幕高度。我添加了边框，以便您可以看到它，然后全屏显示并对其进行测试

非常感谢。现在将尝试。

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;

}

My Logo goes here

loginForm

SocialLoginForm

OP说：I want the logo to stay on the top, but the login div be vertically centered.

谢谢，如果我想使用第一种方法，那么是否必须在身体上设置display：table？还是可以定义一个将所有内容包裹在体内的div并将display：table分配给该div？

不，您可以根据自己的标记使用我的方法。

或为什么您要使用第一种方法？，我用了您指定的html

如果您不介意使用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

}

}