Vue组件居中：文字居中，按钮居中，图片居中等，如何实现在容器中居中

Drawing stars

已于 2022-03-26 18:02:02 修改

阅读量8.7w

点赞数 41

CC 4.0 BY-SA版权

分类专栏： VUE 文章标签： vue.js html5 css

于 2022-03-26 12:13:09 首次发布

本文链接：https://blog.csdn.net/yuanqianxi/article/details/123752634

VUE 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了在Vue中实现组件居中的三种方法：利用`text-align: center`，使用`margin: auto`以及通过放置空组件达到水平居中效果。通过实例代码和效果展示，解释了各种方法的适用场景和原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue实现组件在容器中居中显示的办法

本文用实验的方法理解各种方法实现居中的效果。
实现水平居中的样式主要有：text-align: center， margin: auto。
当然还有别的方式也可以实现，也会写在下面。
用三个同样的div来控制变量法看效果，这三个div既是组件也是容器。下面将他们分别叫做A，B，C。

<template>
    <div>
    	<!--A-->
        <div style="border:solid #409eff ;width: 400px;height: 200px;" >
            <el-button>1</el-button>
            <div style="border:solid bisque;width: 200px;height: 100px;">
                <el-button>2</el-button>
                <div style="border:solid chartreuse;width: 100px;height: 50px;">
                    <el-button>3</el-button>
                </div>
            </div>
        </div>
        <!--B-->
        <div style="border:solid #409eff ;width: 400px;height: 200px;" >
            <el-button>1</el-button>
            <div style="border:solid bisque;width: 200px;height: 100px;">
                <el-button>2</el-button>
                <div style="border:solid chartreuse;width: 100px;height: 50px;">
                    <el-button>3</el-button>
                </div>
            </div>
        </div>
        <!--C-->
        <div style="border:solid #409eff ;width: 400px;height: 200px;" >
            <el-button>1</el-button>
            <div style="border:solid bisque;width: 200px;height: 100px;">
                <el-button>2</el-button>
                <div style="border:solid chartreuse;width: 100px;height: 50px;">
                    <el-button>3</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

border//边框的显示及颜色
width//宽度
height//高度
最初效果

text-align: center效果

将text-align: center放到div的style中;
分别应用于A的大框，B的中框，C的小框中。

代码只取A展示，其它的不再赘述，后面也不再重复展示代码

<div style="border:solid #409eff ;width: 400px;height: 200px;text-align: center;" >
            <el-button>1</el-button>
            <div style="border:solid bisque;width: 200px;height: 100px;">
                <el-button>2</el-button>
                <div style="border:solid chartreuse;width: 100px;height: 50px;">
                    <el-button>3</el-button>
                </div>
            </div>
        </div>

改动后效果如下：
text-align应用于各个div中产生的效果
红色箭头是被应用的div框。
可以看出，text-align: center可以使该容器内部元素在该容器内水平居中，但不能使子容器在该容器内部水平居中。子容器继承了父容器，故在最大容器中应用了text-align: center后，其子容器也有此效果。

margin: auto效果

清除掉text-align: center 用margin: auto来替代，还是分别应用于A的大框，B的中框，C的小框中。
效果如下：

红色箭头是被应用的div框。
可以看出，应用了margin: auto的div组件，在它所处的容器中水平居中，并且这是作为组件的属性，而不是作为容器的属性，故不会传给子容器。

用两个空组件来让组件水平居中效果

只取A做如下改动

<template>
    <div>
        <div style="border:solid #409eff ;width: 400px;height: 200px; " >
            <el-button>1</el-button>
            <div style="border:solid bisque;width: 200px;height: 100px;">
                <div style="display: flex">
                    <div style="flex: 1"></div>
                    <el-button>2</el-button>
                    <div style="flex: 1"></div>
                </div>
                <div style="display: flex">
                    <div style="flex: 1"></div>
                        <div style="border:solid chartreuse;width: 100px;height: 50px;">
                            <el-button>3</el-button>
                        </div>
                    <div style="flex: 1"></div>
                </div>
            </div>
        </div>
    </div>
</template>

效果如下：
两个空组件
在这里插入图片描述
这种方法是用一个容器套住你想要水平居中的内容，再在这个内容的左右各放一个等大的组件（容器），就可以实现水平居中了。

<el-button>想要居中的内容</el-button>

将上面换成下面。

<div style="display: flex">
   <div style="flex: 1"></div>
   <el-button>想要居中的内容</el-button>
   <div style="flex: 1"></div>
</div>