Added flexbox to .vue-avatar--wrapper so its content stays exactly on the xy middle (eliep#32)

* Added flexbox xy align support

Author: e200

src/Avatar.vue

@@ -4,6 +4,14 @@
   </div>
 </template>
 
+<style lang="css">
+.vue-avatar--wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>
+
 <script>
 export default {
   name: 'avatar',
@@ -72,9 +80,7 @@ export default {
       const style = {
         width: `${this.size}px`,
         height: `${this.size}px`,
-        borderRadius: this.rounded ? '50%' : 0,
-        textAlign: 'center',
-        verticalAlign: 'middle'
+        borderRadius: this.rounded ? '50%' : 0
       }
 
       const imgBackgroundAndFontStyle = {
@@ -85,8 +91,8 @@ export default {
         backgroundColor: this.background,
         font: Math.floor(this.size / 2.5) + 'px/100px Helvetica, Arial, sans-serif',
         fontWeight: 'bold',
-        color: this.fontColor,
-        lineHeight: `${(this.size + Math.floor(this.size / 20))}px`
+        lineHeight: `${(this.size + Math.floor(this.size / 20))}px`,
+        color: this.fontColor
       }
 
       const backgroundAndFontStyle = (this.isImage)