图片与文字在一个div里边垂直与水平居中。暂无数据的显示

电脑版发表于：2024/8/9 17:24

### 使用绝对定位的方式实现
**html:**
```
<div class="course-study-empty" v-else>
    <div class="empty-block">
        <div class="empty-icon" />
        <div class="empty-text">
            暂未查询到课程设置
        </div>
    </div>
</div>
```

**css:**
```
.course-study-empty {
    width: 100%;
    height: 380px;
    margin-top: 5px;

    background: #FFFFFF;
    // box-shadow: 0px 2px 15px 1px rgba(0, 89, 181, 0.11);
    position: relative;

    .empty-block {
        position: absolute;
        top: calc(50% - 57px);
        left: calc(50% - 64px);
        display: flex;
        flex-direction: column;
        align-items: center;

        .empty-icon {
            width: 90px;
            height: 75px;
            background-image: url('/static/img/evaluation/course-study-empty.png');
            background-size: cover;
            margin-bottom: 20px;
        }

        .empty-text {
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 14px;
            color: #8D8D8D;
            text-align: center;
        }
    }

}
```

TeachingNote

图片与文字在一个div里边垂直与水平居中。暂无数据的显示

{{item.title}}