无法将计算机屏幕的 CSS div 居中

Question

>我创建了一个主登录div，它始终显示屏幕中间。但是我还有 2 个div，其中"一"显示在登录div 上方，"秒"显示在登录div 下方。

我的登录div在屏幕中间显示非常好，但登录div 上方和下方的两个div 显示不正确。为什么？有人帮我如何解决这个问题。

我的代码是

.myLogindiv {
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
}
.myAbovediv {
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
}
.myBelowdiv {
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
}

<div class="myAbovediv">Above Div Test</div>
<div class="myLogindiv">Login Div Test</div>
<div class="myBelowdiv">Below Div Test</div>

Answer 1

您可以将这些div包装在一个容器中，并在该容器上应用CSS样式，将定位与CSStransform相结合，使其在中间很好地对齐。

#loginContainer {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

<div id="loginContainer">
<div class="myAbovediv">Above Div Test</div>
<div class="myLogindiv">Login Div Test</div>
<div class="myBelowdiv">Below Div Test</div>
</div>

Answer 2

将其包装在div 中并使用样式来wrapdiv

.wrap {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

<div class="wrap">
<div class="myAbovediv">Above Div Test</div>
<div class="myLogindiv">Login Div Test</div>
<div class="myBelowdiv">Below Div Test</div>
</div>

Answer 3

你可以用1个div来解决这个问题：

使用以下命令：

.mydiv {
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
}

<div class="mydiv">
<p>Above Div Test</p>
<p>Login Div Test</p>
<p>Below Div Test</p>
</div>

Answer 4

使用此防弹片段：

.your-class {
position: relative;
top:50%;
transform: translateY(-50%);
}

取自： http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

Answer 5

请检查我是否以正确的意义回答您的问题。

.myLogindiv {
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
}
.myAbovediv {
position: fixed;
top: 50%;
left: 50%;
margin-top: -75px;
margin-left: -100px;
}
.myBelowdiv {
position: fixed;
top: 50%;
left: 50%;
margin-top: -25px;
margin-left: -100px;
}

<div class="myAbovediv">Above Div Test</div>
<div class="myLogindiv">Login Div Test</div>
<div class="myBelowdiv">Below Div Test</div>

Answer 6

你已经为所有div 编写了相同的 CSS，你没有唯一地标识它们，所以使用 ID 而不是类。

向这些div 添加一个包装器，并使其居中身体。

您的代码应如下所示：

<style>
.demo{
position:absolute;
left:50%;
top:50%;
}
.demo > div{
display:block;
}
</style>
Html code:
<div class="demo">
<div>1</div>
<div>2</div>
<div>3</div>
<div>

Answer 7

到目前为止，所有答案似乎都依赖于较旧的居中技术，这不一定是坏事。

我在下面添加了我的解决方案，该解决方案利用弹性框布局将div 完美居中，而不必依赖任何在您的 CSS 中感觉奇怪的随机数字/像素。

html, body {
min-height: 100%;
}
.wrap {
position: fixed;
display: flex;
flex-wrap: wrap;
min-height: 100%;
width: 100%;
align-content: center;
justify-content: center;
}
.wrap div {
width: 100%;
text-align: center;
}

<div class="wrap">
<div class="myAbovediv">Above Div Test</div>
<div class="myLogindiv">Login Div Test</div>
<div class="myBelowdiv">Below Div Test</div>
</div>

Answer 8

你应该使用 Flexbox

无论屏幕尺寸如何，Flexbox都将确保不同的区域保持在正确的位置。如果你愿意，你也可以看看CSS网格。

试试这个

.container {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
/* This is just 200px for the example, you can change this */
height: 200px;
}
.myLogindiv {
flex: 1;
}
.myAbovediv {
flex: 1;
}
.myBelowdiv {
flex: 1;
}

<div class="container">
<div class="myAbovediv">Above Div Test</div>
<div class="myLogindiv">Login Div Test</div>
<div class="myBelowdiv">Below Div Test</div>
</div>

如果您担心浏览器支持，可以在"我可以使用吗"中查看