Bootstrap 4 - 水平和垂直對齊

Question

我無法水平和垂直對齊以下內容。

有人能告訴我最好的辦法嗎？

<div class="container"> 

    <div class="row"> 

    <div class="col-md-4"> 
     <img width="300" src="../assets/medlogo.png"> 

     <h1 class="text-center login-title">Acessar o programa</h1> 
     <div class="account-wall"> 
     <img class="profile-img" src="https://lh5.googleusercontent.com/-b0-k99FZlyE/AAAAAAAAAAI/AAAAAAAAAAA/eu7opA4byxI/photo.jpg?sz=120" 
      alt=""> 
     <form class="form-signin"> 
      <input type="text" class="form-control" placeholder="Email" required autofocus> 
      <input type="password" class="form-control" placeholder="Password" required> 
      <button class="btn btn-lg btn-primary btn-block" type="submit"> 
        Sign in</button> 
     </form> 
     </div> 

    </div> 
    </div> 
</div> 

謝謝

Answer 1

Bootstrap4現在使用CSS Flexbox的，所以你可以使用相同的。 Flexbox具有垂直和水平對齊支持。

基本上，Flexbox的容器可以具有如flex-direction行（默認值）或柱。使用前者，可以使用屬性align-items垂直對齊其子項，並使用justify-content進行水平對齊。而對於後者，align-items用於水平對齊，而justify-content用於垂直對齊。

你可以閱讀更多關於Flexbox的位置：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

試試這個

<div class=" d-flex justify-content-center align-content-center"> 
     <img width="300" src="../assets/medlogo.png"> 

     <h1 class="text-center login-title">Acessar o programa</h1> 
     <div class="account-wall"> 
     <img class="profile-img" src="https://lh5.googleusercontent.com/-b0-k99FZlyE/AAAAAAAAAAI/AAAAAAAAAAA/eu7opA4byxI/photo.jpg?sz=120" 
      alt=""> 
     <form class="form-signin"> 
      <input type="text" class="form-control" placeholder="Email" required autofocus> 
      <input type="password" class="form-control" placeholder="Password" required> 
      <button class="btn btn-lg btn-primary btn-block" type="submit"> 
        Sign in</button> 
     </form> 
     </div> 

    </div> 

我刪除了COL-MD-4與d-flex justify-content-center align-content-center取而代之。這是flexbox的bootstrap 4測試版實用程序。雖然你也可以做內嵌樣式

更多信息 http://getbootstrap.com/docs/4.0/utilities/flex/