Flex的框不是垂直和水平居中

Question

我目前正在與景觀搭載Vue.js

的電子應用目前，我有這個（用於測試目的）

<template> 
    <div class="formWrapper"> 
    <div class="inputGroup"> 
     <span class="inputPrepend"><i class="fa fa-user"></i></span> 
     <input type="text" name="" value=""> 
    </div> 
    </div> 
</template> 

<script> 
    export default { 

    } 
</script> 

<style scoped> 
    .formWrapper { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    } 
    .inputGroup { 
    align-self: center; 
    } 
</style> 

我結束了這個結果：

但我似乎無法得到垂直居中的情況發生。

我已經確定所有的父元素有一個height: 100%;，但仍不能讓它往下走，也是爲什麼我需要指定align-self如果父柔性容器formWrapper已指定center爲align-items和justify-content

謝謝。

Answer 1

您需要將body設置爲height: 100vh和formWrapper，並將所有父元素設置爲height: 100%。

活生生的例子：

body { 
 
    height: 100vh; 
 
} 
 
.formWrapper { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    height: 100%; 
 
}

<div class="formWrapper"> 
 
    <div class="inputGroup"> 
 
    <span class="inputPrepend"><i class="fa fa-user"></i></span> 
 
    <input type="text" name="" value=""> 
 
    </div> 
 
</div>

有可能做到這一點更聰明的方式，但是這是我能想出的最好。