Tek Shinobi

I was writing a navigation bar and wanted to center some buttons in the navbar. Here is how I did it.
Note that there are many items in nav-bar which is not very good in terms of material design principles (for smaller screens). If there are that many items, it is advisable to put a navigation-drawer inside v-app-bar. But I wanted to get the point across, so here it goes.

<template>
    <header>
        <v-app-bar dark>
            <v-container fluid>
                <v-row justify="center" align="center" class="navbar_main">
                    <v-toolbar-items>
                        <v-col>
                            <btn class="navbar_btn"><span class="navbar_btn_text yellow_line">Link 1</span></btn>
                        </v-col>
                        <v-col>
                            <btn class="navbar_btn"><span class="navbar_btn_text pink_line">Link 2</span></btn>
                        </v-col>
                        <v-col>
                            <btn class="navbar_btn"><span class="navbar_btn_text pink_line">Link 3</span></btn>
                        </v-col>
                    </v-toolbar-items>
                    <v-spacer></v-spacer>
                    <v-toolbar-items>
                        <v-col>
                            <btn class="navbar_btn"><span class="navbar_btn_text yellow_line">Link 4</span></btn>
                        </v-col>
                        <v-col>
                            <btn class="navbar_btn"><span class="navbar_btn_text yellow_line">Link 4</span></btn>
                        </v-col>
                        <v-col>
                            <btn class="navbar_btn"><span class="navbar_btn_text pink_line">Link 5</span></btn>
                        </v-col>
                    </v-toolbar-items>
                </v-row>
            </v-container>
        </v-app-bar>
    </header>
</template>



<script>
export default {
    
}
</script>

<style scoped>
@import url(https://fonts.googleapis.com/css?family=Roboto);
*, *:before, *:after{
    box-sizing: border-box;
}
* {
    margin: 0;
    padding: 0;
    border: 0 none;
    position: relative;
    outline: none;
}
.navbar_main{
    position: relative;
    box-sizing: border-box;
    font-size: 1.2rem;
    font-weight: normal;
    color: rgba(0,0,0,.4);
}
.navbar_btn{
    text-decoration: none;
    margin: 1rem;
    color: white;
    padding:0px;
    font-size: 1rem;
    width:100%;
}
.navbar_btn_text{
    box-sizing: border-box;
    color: white;
    margin: 0px;
    
}
.navbar_btn_text::before{
    content: "";
    box-sizing: border-box;
    border-radius: 5px;
    height: 3px;
    background: #FFFFFF;
    position: absolute;
    width: 100%;
    bottom: 40%;
    visibility: hidden;
    transform: scaleX(0);
    transition: 0.15s linear;
}
.navbar_btn_text.yellow_line::before{
    background: yellow;
}
.navbar_btn_text.pink_line::before{
    background: #FF00FF;
}
.navbar_btn_text:hover::before,
.navbar_btn_text:focus::before{
    visibility: visible;
    transform: scaleX(1);https://tekshinobi.com/wp-admin/post.php?post=279&action=edit#
}
</style>

Note the line:v-container fill-height

Here fill-height prop is essential for centering, particularly vertical centering.