柔性盒不垂直和水平居中

Question

我目前正在使用d="M13...

支持的View制作电子应用

我目前有这个（用于测试目的）

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%;如果父Flex容器{{1已为align-self和formWrapper

指定了center

感谢。

Answer 1

您需要将MessageDeduplicationId设置为body，将height: 100vh和所有父元素设置为formWrapper。

实例：

height: 100%

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

可能有一种更聪明的方法可以做到这一点，但这是我能想到的最好的方法。