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

Drawing stars

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

阅读量8.5w

点赞数 27

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

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

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

版权

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

摘要由CSDN通过智能技术生成

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