javascript实现弹出窗口始终保持页面最上层的同时保持水平垂直居中

我写一个小项目的时候发现，我需要点击按钮让一个页面一直位于最上面，于是我就开始思考，如何实现，于是我想到了，我需要的是页面的一个组件在上面，而不是页面，于是，我只需要定义一个div，在div里面实现就可以了，我如果在vue中我可以直接使用插槽，也相当于是一个页面了，

于是我使用了v-if，当为false时，div为隐藏，true，div为出现。

于是我定义了一个点击事件，改变dialogVisible的真假进行变换        

但是我发现我写的css太多了，导致它们互相冲突，没有办法水平垂直居中，于是我想了一下，我让它们直接脱离文本流不就可以了，于是我定义弹窗为浮动，不受文本流影响，果然可以正常居中了。但是它是在底层，我点击不到，于是我找到了一个叫做z-index,用于提高元素优先级，然后就正常显示了。

//弹窗
<div class="dialog_1">
			<div v-if="dialogVisible" class="dialog_2">
				<div class="dialog_3">
					<input type="text" v-model="inputValue" placeholder="请输入数值">
					<button @click="confirm">确定</button>
				</div>
			</div>
</div>
//按钮
<button @click="showDialog">
		<image src="../../static/画笔.png"></image>
		<span>输入ISBN</span>
</button>

                showDialog() {
			      this.dialogVisible = true; // 显示弹窗
			    },
			    confirm() {
			      // 处理确认逻辑，比如保存输入的值
			      console.log("输入的值为：" + this.inputValue);
			      this.dialogVisible = false; // 隐藏弹窗
			      this.inputValue = ""; // 清空输入框的值
			    }

.dialog_1{
		position: fixed;
		z-index: 1;
	}
	.dialog_2{
		height: 100vh;
		width: 100vw;		
		 display: flex;
		  justify-content: center;
		  align-items: center;
		  		  
	}