Căn chỉnh theo chiều ngang và chiều dọc trong khung thực hiện

Question

Làm cách nào để căn giữa hộp đăng nhập cả ngang và dọc?

Dưới đây là cấu trúc của tôi:

<div class="container"> 
<div class="row"> 
<div class="col s12 m6"> 
    <div class="card"> 
     <div class="card-content"> 
      <span class="card-title black-text">Sign In</span> 
      <form> 
       <div class="row"> 
        <div class="input-field col s12"> 
         <input placeholder="Placeholder" id="firstname" type="text" class="validate"> 
         <label for="firstname" class="active">First Name</label> 
        </div> 
       </div> 
       <div class="row"> 
        <div class="input-field col s12"> 
         <input placeholder="Placeholder" id="lastname" type="text" class="validate"> 
         <label for="lastname" class="active">Last Name</label> 
        </div> 
       </div> 
      </form> 
     </div> 
     <div class="card-action"> 
      <input type="submit" class="btn" value="Sign In"> 
     </div> 
    </div> 
</div> 

tôi đã cố gắng sử dụng valign-wrapper và valign lớp nhưng nó không hoạt động.

Answer 1

bạn đã thử

.col.s12.m6{ 
    float: none; 
    margin: 100px auto; 
    width: 300px; 
    height: 300px; 
} 

Check-out fiddle này, http://fiddle.jshell.net/8vu47fb2/

sử dụng margin-top, margin-bottom để gắn hộp ở trung tâm.

Answer 2

Set văn bản sắp xếp tài sản của div

<div class="input-field col s12" style="text-align:center"> 

<div class="input-field col s12" style="text-align:center"> 

<input placeholder="Placeholder" id="lastname" type="text" class="validate" style="vertical-align:middle"> 

<input placeholder="Placeholder" id="firstname" type="text" class="validate" style="vertical-align:middle"> 

thấy ở đây http://jsfiddle.net/kuqqdswg/

Answer 3

Cố gắng giải pháp này, tôi hy vọng nó có thể giúp bạn

.card { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    -moz-transform: translate(-50%, -50%) 
    -webkit-transform: translate(-50%, -50%) 
    -ms-transform: translate(-50%, -50%) 
    -o-transform: translate(-50%, -50%) 
    transform: translate(-50%, -50%); 
} 

Ngoài ra bạn có thể thử

body (or container-div) { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
} 

Answer 4

Chỉ cần sử dụng offset để căn chỉnh. Tắt chế độ xem thẻ bằng một nửa số còn lại.

<div class="container"> 
    <div class="row"> 
    <div class="col s12 m6 offset-m3"> 
     <div class="card"> 
     <div class="card-content"> 
      <span class="card-title black-text">Sign In</span> 
      <form> 
      <div class="row"> 
       <div class="input-field col s12"> 
       <input placeholder="Placeholder" id="firstname" type="text" class="validate"> 
       <label for="firstname" class="active">First Name</label> 
       </div> 
      </div> 
      <div class="row"> 
       <div class="input-field col s12"> 
       <input placeholder="Placeholder" id="lastname" type="text" class="validate"> 
       <label for="lastname" class="active">Last Name</label> 
       </div> 
      </div> 
      </form> 
     </div> 
     <div class="card-action"> 
      <input type="submit" class="btn" value="Sign In"> 
     </div> 
     </div> 
    </div> 

Answer 5

Dưới đây là đúng (materializecss) cách để làm điều đó và không có css lộn xộn:

<div class="valign-wrapper" style="width:100%;height:100%;position: absolute;"> 
    <div class="valign" style="width:100%;"> 
     <div class="container"> 
      <div class="row"> 
       <div class="col s12 m6 offset-m3"> 
       <div class="card"> 
        <div class="card-content"> 
         <span class="card-title black-text">Sign In</span> 
         <form> 
          <div class="row"> 
          <div class="input-field col s12"> 
           <input placeholder="Placeholder" id="firstname" type="text" class="validate"> 
           <label for="firstname" class="active">First Name</label> 
          </div> 
          </div> 
          <div class="row"> 
          <div class="input-field col s12"> 
           <input placeholder="Placeholder" id="lastname" type="text" class="validate"> 
           <label for="lastname" class="active">Last Name</label> 
          </div> 
          </div> 
         </form> 
        </div> 
        <div class="card-action"> 
         <input type="submit" class="btn" value="Sign In"> 
        </div> 
       </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 6

Bạn cần phải thừa kế tài sản chiều cao đầy đủ, bắt đầu từ html và body thẻ.