feat(NcEmptyContent): add centered prop

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>

src/components/NcEmptyContent/NcEmptyContent.vue

@@ -129,6 +129,30 @@ like a link.
 <script>
 import Comment from 'vue-material-design-icons/Comment'
 
+export default {
+	components: {
+		Comment,
+	},
+}
+</script>
+```
+
+### Centered
+
+Use `centered` prop to when you want to center the content instead of having a fixed top margin.
+
+```
+<template>
+	<NcEmptyContent name="No comments" centered style="height: 400px">
+		<template #icon>
+			<Comment />
+		</template>
+	</NcEmptyContent>
+</template>
+
+<script>
+import Comment from 'vue-material-design-icons/Comment'
+
 export default {
 	components: {
 		Comment,
@@ -139,7 +163,7 @@ export default {
 </docs>
 
 <template>
-	<div class="empty-content" role="note">
+	<div class="empty-content" :class="{ 'empty-content_centered': centered }" role="note">
 		<div v-if="$slots.icon" class="empty-content__icon" aria-hidden="true">
 			<!-- @slot Optional material design icon -->
 			<slot name="icon" />
@@ -168,15 +192,31 @@ export default {
 	name: 'NcEmptyContent',
 
 	props: {
+		/**
+		 * A header message about an empty content shown
+		 * @example 'No comments'
+		 */
 		name: {
 			type: String,
 			default: '',
 		},
 
+		/**
+		 * Desription of the empty content
+		 * @example 'No comments yet, start the conversation!'
+		 */
 		description: {
 			type: String,
 			default: '',
 		},
+
+		/**
+		 * If true, content will be centered instead of having fixed top margin
+		 */
+		centered: {
+			type: Boolean,
+			default: false,
+		},
 	},
 
 	computed: {
@@ -205,6 +245,12 @@ export default {
 		margin-bottom: 5vh;
 	}
 
+	&_centered {
+		justify-content: center;
+		margin-top: 0;
+		margin-bottom: 0;
+	}
+
 	&__icon {
 		display: flex;
 		align-items: center;