在Vue中添加居中的水印，你可以通过CSS样式来实现。以下是一个简单的例子，展示了如何使用CSS和Vue来创建一个居中的水印效果：
创建水印的CSS样式：
.watermark {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
color: rgba(180, 180, 180, 0.3);
font-size: 24px;
font-family: Arial, sans-serif;
letter-spacing: 2px;
z-index: 9999;
width: 100%;
text-align: center;
}
.watermark::after {
content: '版权所有 © 您的公司名';
display: block;
width: 100%;
transform: rotate(-45deg);
}
在Vue组件中使用水印：
<template>
<div id="app">
<div class="watermark"></div>
<!-- 其他页面内容 -->
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
@import './assets/css/watermark.css'; /* 引入水印样式 */
</style>
这段代码会在Vue应用的中心位置创建一个固定位置的水印，水印内容是“版权所有 © 您的公司名”，并且有一个-45度的旋转。
记得在实际应用中，你需要根据自己的需求调整水印的内容、样式和位置。