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样式，并结合CSS transform的位置使其在中间对齐。

#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中，并使用样式wrap div

.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

您为所有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 6

请检查我是否正确地回答了你的问题。

.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 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>

如果您担心浏览器支持，可以通过Can I Use

进行检查。

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

8 个答案: