CSS 在移动设备上的不正确行为

Question

我正在尝试将我的登录和注册面板对齐到屏幕中间。如果我从电脑和检查菜单中检查它，它工作正常，你可以在其中 select 任何手机查看它是否工作正常。我想从我的真实手机上查看它，但这是我得到的：image 这就是在 PC 上的检查菜单中的样子： image2

我使用的代码：

<div class="wrapper2" style="font-size: 24px;">
        <h2>Bejelentkezés</h2>
        <p style="padding-bottom: 30px;">Kérem töltse ki az alábbi mezőket.</p>
        <form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
          <div class="form-group <?php echo (!empty($username_err)) ? 'has-error' : ''; ?>">
            <label>Felhasználónév/Email cím</label>
            <input type="text" name="username" class="form-control" value="<?php echo $username; ?>">
            <span class="help-block" style="color: red;"><?php echo $username_err; ?></span>
          </div>
          <div class="form-group <?php echo (!empty($password_err)) ? 'has-error' : ''; ?>">
            <label>Jelszó</label>
            <input type="password" name="password" class="form-control">
            <span class="help-block" style="color: red;"><?php echo $password_err; ?></span>
          </div>
          <div class="form-group">
            <input type="submit" class="btn btn-primary" value="Bejelentkezés">
          </div>
          <div class="plus" style="font-size: 18px;">
          <p>Még nem regisztrált? <a href="register.php">Regisztráció</a></p>
          <p>Elfelejtette jelszavát? <a href="password-reminder.php">Jelszó emlékeztető</a></p>
          </div>
        </form>
      </div>

和 css:

.wrapper2{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font: 18px sans-serif;
  text-align: center;
}

Answer 1

根据 div 的 css 和 class .wrapper2 进行猜测我认为您正试图将此 div 定位为垂直居中于其父项 div 和 class .main-panel，所以我从你提供的实时 link 中检查了那个 div 的 css，它是 100%（我假设你想要这等于设备视口的高度），因此您可以通过为此 div 设置 min-height:100vh; 来实现此目的，例如

.perfect-scrollbar-on .main-panel {
    height: 100%;
    max-height: 100%;
    min-height: 100vh;
}

希望这能解决您的问题。

Answer 2

我发现您可能对 css top 属性有疑问。当我禁用 top 属性时，看起来问题出在您的手机上。希望对你有帮助。

CSS 在移动设备上的不正确行为

Incorrect CSS behavior on mobile devices

html

css

mobile

alignment

vertical-alignment