Datsik Datsik - 4 days ago 5
CSS Question

Flex box not vertically and horizontally centering

I'm currently making an Electron app with the View powered by

Vue.js


I currently have this (for testing purposes)

<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>


I end up with this result:

enter image description here

But I cannot seem to get the vertical centering to happen.

I have made sure all parent elements have a
height: 100%;
but still can't get it to go down, also why do I need to specify
align-self
if the parent flex container
formWrapper
has specified
center
for
align-items
and
justify-content


Thanks.

Answer

You need to set body to height: 100vh, and formWrapper and all parent elements to height: 100%.

Live example:

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>

There might be a smarter way to do this, but this is the best I could figure out.

Comments