Question

我正在使用bootstrap 4 beta 2而且我无法在页面上居中表单...

这是我的代码的链接
https://codepen.io/davidrodri/pen/jawpeJ

<div class="container">
  <div class="row justify-content-center h-100 align-middle">
    <div class="align-self-center">
        <form>
          <h2 class="text-center">Benvenuto</h2>
            <div class="form-group">
                <label for="username">Utente</label>
                <input type="text"  class="form-control"  id="username" >
            </div>
            <div class="form-group">
                <label for="password">Password</label>
                <input type="password" class="form-control"  id="password" >
            </div>
            <button class="btn btn-lg btn-primary btn-block" type="submit">Login</button>
        </form>
    </div>
  </div>
</div>

Answer 1

将以下css应用于父div

更新了cdoepen https://codepen.io/anon/pen/oowaav

.parentdiv{
    align-items: center;
    display: flex;
    height: 100vh;
}

Answer 2

你需要先将你的html和身高设置为100％

html, 
body {
    height: 100%;
}

然后将容器高度设置为100％

<div class="container h-100">
  <div class="row justify-content-center h-100 align-middle">
    <div class="align-self-center">
        <form>
          <h2 class="text-center">Benvenuto</h2>
            <div class="form-group">
                <label for="username">Utente</label>
                <input type="text"  class="form-control"  id="username" >
            </div>
            <div class="form-group">
                <label for="password">Password</label>
                <input type="password" class="form-control"  id="password" >
           </div>
            <button class="btn btn-lg btn-primary btn-block" type="submit">Login</button>
        </form>
    </div>
  </div>

现在align-self-center将获得垂直适合的空间。

使用bootstrap 4垂直变形

2 个答案: