文字垂直居中,div垂直居中,div设置阴影

<template>
    <div >
      <div class="main">
        <div class="content">
          <span class="words">
            文字居中<br/>
            文字垂直居中
          </span>
        </div>
      </div>
    </div>
</template>

<script>
    export default {
        name: "index",
    }
</script>

<style lang="less">
  .main{
    height: 300px;
    width: 500px;
    border: 1px solid dodgerblue;
    //保证子元素垂直居中start
    display: flex;
    align-items: center; /*定义main的子元素垂直居中*/
    justify-content: center; /*定义main的子元素水平居中*/
    margin: 0 auto;//div水平居中
    //子元素垂直居中end
  }

  .content{
    height: 80px;
    width: 150px;
    background-color: powderblue;
    box-shadow:0 0 8px #1847db; //沿x轴方向的偏移量 沿y轴负方向的偏移量 阴影扩展半径 阴影颜色
    border-radius: 10px; //设置圆角边框
    /*line-height: 80px;//单行文字垂直居中*/

    /*文字垂直居中start*/
    display: table;
    .words{
      display: table-cell;
      vertical-align: middle;
    }
    /*文字垂直居中end*/
  }
</style>

结果：