php - CSS - ブロックを真ん中に置く

Question

index.php に別のファイルを含めるためだけに PHP を使用する単純な PHP Web サイトがあるため、HTML のみを使用していると考えることができます。

問題は、ラップトップでサイトの 1 ページを表示すると正常に表示されているように見えるのに、スマートフォンや PC から表示すると非常に奇妙になることです。

リンクは次のとおりです: strasbourgmeetings.org/rigaCloud/login : 中央に半透明のログイン フォームがある 2 色のページがあります。問題は、ラップトップだけが真ん中に表示され、PC や他のデバイスには表示されないことです。

はい、ひどい CSS コードがあることは承知していますが、とにかく、このブロックを真ん中に配置していただけると助かります。

top: 50%; left: 50%PS:と思ってい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

これは、特定の幅のない要素を中央に配置する私の方法です。このメソッドは、テキスト、画像、ボタンなどに使用できます。

/* 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%;
}

Answer 2

それに特定の幅を与えてくださいmargin: 0 auto;