浏览器使用vue来居中元素

vue中水平垂直居中元素

getBoundingClientRect()获取元素的大小和相对与视口的位置

widow获取窗口(页面)加载事件

<div ref="dragElement">要居中的元素</div>

mounted() {
	let div = this.$refs.dragElement.getBoundingClientRect();//获取元素信息
  let win = window;//获取浏览器信息
  let ml = win.innerWidth - div.width;//剩余宽度 = 浏览器窗口宽度-元素宽度
  let mt = win.innerHeight - div.height//剩余高度 = 浏览器窗口高度-元素高度
  this.$refs.dragElement.style.marginTop = (mt/2)+'px';//设置margin-top = 剩余高度/2
  this.$refs.dragElement.style.marginLeft = (ml/2)+'px';//设置margin-left = 剩余宽度/2
}