Vue中容器和标签的居中css样式

容器居中样式

<template>
    <div>
    
        <div class="wrap">
    
            <!-- <p>单个vue文件</p> -->
    
            <div class="content">
    
                <img src="../img/02.jpg" alt="">
    
                <h1>若森·画江湖</h1>
    
                <h2>玄机·天行九歌</h2>
    
            </div>
    
        </div>
    
        <div>
    
            <p class="align-center">单行文字垂直居中 height = line-height;水平居中text-align: center; </p>
    
        </div>
    
    
    
    </div>
</template>

<script>
export default {
    name: '',
    data() {
        return {}
    },
    components: {}
}
</script>
<style scoped>
/* display: table 表格  display: table-cell; 单元格*/

/* vertical-align: middle;垂直居中（只对行内元素有效）  text-align: center; 水平居中（只对行内元素有效）*/

.wrap {
    height: 10.666667rem;
    width: 100%;
    border: 1px blue solid;
    display: table;
    text-align: center;
}

.content {
    vertical-align: middle;
    display: table-cell;
}

img {
    width: 5.333333rem;
    height: 2.666667rem;
}

.align-center {
    width: 100%;
    height: 4rem;
    line-height: 4rem;
    text-align: center;
}
</style>

源码链接

或者使用flex弹性盒子模型

.div{
     width: 100%;
     margin-top: 0.32rem;
     display: flex;
     flex-direction: column;
     align-items: center;
 }

单个标签居中

<template>
   <div class="">
      <div>
          <p><span class="one">玄机</span>&nbsp;&nbsp; <span class="two">·秦时明月</span> <span class="three">!!</span> </p>
      </div>
   </div>
</template>

<script>
export default {
   name: '',
   data() {
        return {}
   },
  components: {}
}
</script>

<style scoped >
/* p标签居中显示 */
 p{
     background-color: #eeccee;
     height: 4rem;
     text-align: center;
     line-height: 4rem;
 }
 .one{
     font-size: 2.133333rem;
     color: #c9394a;
     font-weight: bold;
 }
 /* vertical-align: 0.4rem; 垂直上移0.4rem */
 .two{
     font-size: 1.066667rem;
     color: gray;
     text-decoration: underline;
     letter-spacing: 0.133333rem;
     vertical-align: 0.4rem;
 }
 .three{
     font-size: 2.133333rem;
     color: gray;
     font-style: oblique;
 }
</style>

源码链接

多个块级子元素水平居中排列

        display: flex;
        justify-content: center;

所有子元素居中排列

       display: flex;
        flex-direction: column;
        align-items: center;