Question

我有一个简单的PHP网站，它只使用PHP在index.php中包含其他文件，所以你可以认为它只使用HTML。

问题是，当我在笔记本电脑中查看网站的一页时，它似乎正常显示，而从我的智能手机或PC上查看它会让它变得非常奇怪。

以下是链接：strasbourgmeetings.org/rigaCloud/login：您会在其中找到双色页面，中间有一个半透明的登录表单。问题是，只有我的笔记本电脑在中间显示，但我的电脑和其他设备不是。

是的，我知道有一个可怕的CSS代码，但是，无论如何，我非常感谢你帮助将这个块放在中间。

P.S。：我认为top: 50%; left: 50%和margin: -25% 0 0 -25%会使它居中，但......

这就是我使用的HTML：

<div class="white"></div>
<div class="blue"></div>
<div class="heraldry"></div>
    <!--</div>-->
<section class="container">
<div class="login">
    <div class="loginOpacity"></div>
  <h1>Login to RigaCloud</h1>
  <form method="post" action="index.html">
    <p><input type="text" name="login" value="" placeholder="Username or Email"></p>
    <p><input type="password" name="password" value="" placeholder="Password"></p>
    <p class="remember_me">
      <label>
        <input type="checkbox" name="remember_me" id="remember_me">
        Remember me on this computer
      </label>
    </p>
    <p class="submit"><input type="submit" name="commit" value="Login"></p>
  </form>
</div>

<!--<div class="login-help">-->
  <!--<p>Forgot your password? <a href="index.html">Click here to reset it</a>.</p>-->
<!--</div>-->
</section>

.white {
position: absolute;
top: 0;
width: 100%;
height: 50%;
}

.blue {
position: absolute;
bottom: 0;
width: 100%;
height: 50%;
z-index: -1;
}

.heraldry {
position: absolute;
top: 50%;
left: 50%;
width: 728px;
height: 428px;
margin: -214px 0 0 -364px;
}

.container {
margin: 80px auto 0 -25%;
width: 640px;
position: absolute;
top: 10%;
left: 50%;
}

.containerOpacity {
margin: 90px auto 0 -25%;
width: 640px;
position: absolute;
top: 10%;
left: 50%;
}

.login {
position: absolute;
left: 50%;
top: 50%;
//margin: 0 auto;
margin: 0 auto 0 -25%;
padding: 20px 20px 20px;
width: 310px;
}
.login:before {
content: '';
position: absolute;
top: -8px;
right: -8px;
bottom: -8px;
left: -8px;
}

.loginOpacity {
background: #000;
position: absolute;
width: 310px;
top: -8px;
right: -8px;
bottom: -8px;
left: -8px;
margin: 0 auto;
padding: 20px 20px 20px;
}

Answer 1

为其指定一个特定的宽度并执行margin: 0 auto;

Answer 2

对左边距和右边距使用auto会将元素置于其父元素中（与其他合适的css规则一起）。但是，您的整个登录表单位于绝对定位的<section class="container">部分内。你应该集中精力集中这个容器元素，这可能需要去掉它的绝对位置。

BTW如果您在笔记本电脑上减小浏览器的宽度，您的登录也不会居中。

Answer 3

这是我对没有特定宽度的元素进行居中的方法。您可以将此方法用于文本，图像，按钮等！

/* The HTML */
<div class="container">
   <div class="content"></div>
</div>

/* The CSS */
.container {
    float: left;
    position: relative;
    left: 50%;
}

.content {
    float: left;
    position: relative;
    left: -50%;
}

CSS - 在中间放置块

3 个答案: