VUE模板问题以文本为中心使文本居中

Question

我在用vue.js组件中的引导程序属性“文本中心”将h1标签 category.title 居中时遇到问题，标题出现在左侧。其他所有内容，例如 category.description ，都可以正确居中。看起来只有标题拒绝受到任何对齐方式的影响。

<template>
    <div class="row" v-for="category in laravelData">
        <h1 class="text-center">{{ category.title }}</h1>
        <p class="text-center pb-3">{{ category.description }}</p>
        <div class="col-sm-12 col-md-6 col-lg-6" v-for="project in category.project">
            <div class="projects-thumb">
                    <img :src="/img/ + photo.filename" class="img-responsive" alt=""  v-for="photo in project.photo">
                    <h3 class="pt-3">{{ project.title }}</h3>
                    <p class="mt-2 p-3">{{ project.description }}</p>
            </div> 
        </div>
    </div>
</template>
<script>

    export default {
        data() {
            return {
                category: {},
                laravelData: {},
                id: '',
                succmsg:  true,
                showmodal: false,
                actionmsg: '',
            }
        },
        methods: {
            projectList() {
                var id = _.last( window.location.pathname.split( '/' ) ); 
                axios.get('/api/category/'+ id).then((response) => {
                    this.laravelData = response.data;
                });
            }
        },
        mounted() {
            this.projectList();
        }
    }
</script>

问题可能是因为此模板中存在多个循环？