垂直居中元素

我想垂直居中表單。橫向可以用margin: 0 auto完成，但我不知道如何垂直進行。垂直居中元素

* { 
 
    border: 1px solid red; 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    -ms-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
    font-family: 'Josefin Sans', sans-serif; 
 
} 
 
.form { 
 
    margin: 0 auto; 
 
    max-width: 600px; 
 
    padding: 50px; 
 
    width: 100%; 
 
    background-color: #2C3E50; 
 
} 
 
.row { 
 
    display: flex; 
 
    width: 100%; 
 
} 
 
.col-12 { 
 
    width: 100%; 
 
    padding: 20px; 
 
} 
 
input { 
 
    display: flex; 
 
    width: 100%; 
 
    padding: 10px; 
 
    background-color: #2C3E50; 
 
    border: 1px solid #FFFFFF; 
 
    font-size: 25px; 
 
    color: #ffffff; 
 
}

<div class="form"> 
 
    <form> 
 
    <div class="row"> 
 
     <div class="col-12"> 
 
     <input type="email" name="email" placeholder="Email Address" required> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-12"> 
 
     <input type="password" name="password" placeholder="Password" required> 
 
     </div> 
 
    </div> 
 
    <button>Login</button> 
 
    </form> 
 
</div>

來源

2016-07-15 Dev Modi

[中央元件則垂直排列和霍爾與Flexbox [與...]（http://stackoverflow.com/a/33049198/3597276） –

...或[使用CSS表和定位屬性]（http://stackoverflow.com/a/31977476/3597276） –

嘗試刪除你的CSS代碼，並添加下面的CSS代碼和檢查。它爲我工作。

body 
    { 
    width: 100%; 
    height: 100vh; 
    margin: 0; 
    padding: 0; 
    border: 1px solid; 
    } 
* { 
     border: 1px solid red; 
     -webkit-box-sizing: border-box; 
     -moz-box-sizing: border-box; 
     -ms-box-sizing: border-box; 
     box-sizing: border-box; 
     font-family: 'Josefin Sans', sans-serif;  
    } 

    .form { 
     margin: 0 auto; 
     max-width: 600px; 
     padding: 50px; 
     width: 100%; 
     background-color: #2C3E50; 
      position: absolute; 
    left: 50%; 
    top: 50%; 
    -webkit-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%); 
    } 

    .row { 
     display: flex; 
     width: 100%; 
    } 

    .col-12 { 
     width: 100%; 
     padding: 20px; 
    } 

    input { 
     display: flex; 
     width: 100%; 
     padding: 10px; 
     background-color: #2C3E50; 
     border: 1px solid #FFFFFF; 
     font-size: 25px; 
     color: #ffffff; 
    }

來源

2016-07-15 13:43:48

如提到的，你可以在你的情況下使用Flexbox的模型，甚至直接從HTML標籤：

html { 
 
    height: 100%;/* min-height is an issue with IE*/ 
 
    display: flex; 
 
    /* next can be avoid by setting: margin:auto; to body; BUT IE has some bugs ... */ 
 
    flex-direction: column; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 
/* if last three rules are dropped for html then : 
 
body { 
 
     margin:auto;*//* will be centered on both axis when a flex child */ 
 
/*} */ 
 
* { 
 
    border: 1px solid red; 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    -ms-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
    font-family: 'Josefin Sans', sans-serif; 
 
} 
 
.form { 
 
    margin: 0 auto; 
 
    max-width: 600px; 
 
    padding: 50px; 
 
    width: 100%; 
 
    background-color: #2C3E50; 
 
} 
 
.row { 
 
    display: flex; 
 
    width: 100%; 
 
} 
 
.col-12 { 
 
    width: 100%; 
 
    padding: 20px; 
 
} 
 
input { 
 
    display: flex; 
 
    width: 100%; 
 
    padding: 10px; 
 
    background-color: #2C3E50; 
 
    border: 1px solid #FFFFFF; 
 
    font-size: 25px; 
 
    color: #ffffff; 
 
}

<div class="form"> 
 
    <form> 
 
    <div class="row"> 
 
     <div class="col-12"> 
 
     <input type="email" name="email" placeholder="Email Address" required> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-12"> 
 
     <input type="password" name="password" placeholder="Password" required> 
 
     </div> 
 
    </div> 
 
    <button>Login</button> 
 
    </form> 
 
</div>

來源

2016-07-15 13:45:00

* { 
 
     border: 1px solid red; 
 
     -webkit-box-sizing: border-box; 
 
     -moz-box-sizing: border-box; 
 
     -ms-box-sizing: border-box; 
 
     box-sizing: border-box; 
 
     font-family: 'Josefin Sans', sans-serif; 
 
    } 
 
    .wrapper{ 
 
     display:table; 
 
     } 
 
    .form { 
 
     margin: 0 auto; 
 
     max-width: 600px; 
 
     padding: 50px; 
 
     display:table-cell; 
 
     vertical-align:middle; 
 
     width: 100%; 
 
     background-color: #2C3E50; 
 
    } 
 
    .row { 
 
     display: flex; 
 
     width: 100%; 
 
    } 
 
    .col-12 { 
 
     width: 100%; 
 
     padding: 20px; 
 
    } 
 
    input { 
 
     display: flex; 
 
     width: 100%; 
 
     padding: 10px; 
 
     background-color: #2C3E50; 
 
     border: 1px solid #FFFFFF; 
 
     font-size: 25px; 
 
     color: #ffffff; 
 
    }

<div class="wrapper"> 
 
    <div class="form"> 
 
     <form> 
 
     <div class="row"> 
 
      <div class="col-12"> 
 
      <input type="email" name="email" placeholder="Email Address" required> 
 
      </div> 
 
     </div> 
 
     <div class="row"> 
 
      <div class="col-12"> 
 
      <input type="password" name="password" placeholder="Password" required> 
 
      </div> 
 
     </div> 
 
     <button>Login</button> 
 
     </form> 
 
    </div> 
 
</div>

來源

2016-07-15 13:49:07 Rakshith

thanx。 rakshith .. –

垂直居中元素

回答

相關問題