Question

我正在尝试将<div class="loginfeld">居中放置，但在保持响应速度的同时，无法使其居中放置（在中间）。

<html>
    <body>
        <div class ="loginfeld"> 
        <div class="container">
            <div class="col-lg-4"></div>
            <div class="col-lg-4">
                <div class="jumbotron">

                    <center><h1>Hallo!</h1></center>
                    <br>

                    <form action="login.php" method="POST">
                    <div class="form-group">
                    <input type="text" class="form-control" name="benutzername"
                    placeholder="Benutzernamen eingeben">

                    </div>

                    <div class="form-group">
                    <input type="text" class="form-control" name="passwort"
                    placeholder="Passwort eingeben">

                    </div>

                    <button type="text" class="btn
                    btn-primary form-control" name ="login">Login</button>
                    <center><p><?php echo $hinweis; ?></p></center>
                    </form>
                </div>
            </div>
            <div class="col-lg-4"></div>    
        </div>
        </div>
    </body>
</html>

在我的CSS样式文件中：

.loginfeld{
    margin-top: 250px;
    margin-left: 750px;
    max-width: 1000px;
}

它确实在屏幕中间，但并不是真正的固定目标。我试图使用论坛中编写的代码将其快速居中，但对我而言却没有用。

这就是我使用代码K_LUN写下来后的样子。它居中，但现在登录框混乱了。

Answer 1

您可以使用网格偏移使列居中：

<div class="container">
  <div class="col-xs-12 col-xs-offset-0 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
    <div class="jumbotron">
      <h1 class="text-center">Hallo!</h1>

      <form action="login.php" method="POST">
        <div class="form-group">
          <input type="text" class="form-control" name="benutzername" placeholder="Benutzernamen eingeben">

        </div>

        <div class="form-group">
          <input type="text" class="form-control" name="passwort" placeholder="Passwort eingeben">

        </div>

        <button type="text" class="btn
                    btn-primary form-control" name="login">Login</button>
          <p class="text-center">
            <?php echo $hinweis; ?>
          </p>
      </form>
    </div>
  </div>
</div>

Demo

注意几件事：

使用text-center而不是附加标记来居中
请勿将换行符用于间距。使用CSS（.jumbotron h1 {margin-bottom: 20px;}）

Answer 2

我不知道您想要它在屏幕的确切中心（例如从左，右，上，下）还是仅在水平中心。

对于水平中心，您可以简单地进行操作

.parent-element{
    background: lightblue;
    width: 300px;
    height: 300
}
.centered-element{
  margin: auto;
  width: 200px;
  height: 200px;
  background: cyan;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 10px;
}

<div class="parent-element">
  <div class="centered-element">
      Sample Text
  </div>
</div>

Answer 3

Bootstrap提供了足够多的类，可以通过 minimum 自定义CSS来实现所需的功能。

我删除了您在容器的开头和结尾处另外的col-lg-4；还添加了row div，因为您只能在一行中包含col-*类。

之后，您只需将justify-content-center添加到行中以使元素居中，就可以将align-items-center和自定义属性height: 100vh一起添加到行中，以便该行使用视口。

.full-scrn {
  height: 100vh;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<body>
  <div class="container">
    <div class="row justify-content-center align-items-center full-scrn">
      <div class="col-10 col-md-8 col-lg-4">
        <div class="jumbotron">

          <center>
            <h1>Hallo!</h1>
          </center>
          <br>

          <form action="login.php" method="POST">
            <div class="form-group">
              <input type="text" class="form-control" name="benutzername" placeholder="Benutzernamen eingeben">

            </div>

            <div class="form-group">
              <input type="text" class="form-control" name="passwort" placeholder="Passwort eingeben">

            </div>

            <button type="text" class="btn
                    btn-primary form-control" name="login">Login</button>
            <center>
              <p>
                <?php echo $hinweis; ?>
              </p>
            </center>
          </form>
        </div>
      </div>
    </div>
  </div>
</body>

使自己创建的div类响应居中

3 个答案: