Vue.js 路由组件水平垂直居中实现方法

可以使用CSS样式来让导入的组件水平垂直居中。

1. 使用flex布局

可以在父元素上使用display: flex和justify-content: center、align-items: center来让子元素水平垂直居中。

示例代码：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.component {
  /* 其他样式 */
}

<div class="container">
  <router-view class="component"></router-view>
</div>

2. 使用绝对定位

可以在父元素上使用position: relative，然后在子元素上使用position: absolute和top: 50%、left: 50%以及transform: translate(-50%, -50%)来让子元素水平垂直居中。

示例代码：

.container {
  position: relative;
  height: 100vh;
}

.component {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 其他样式 */
}

<div class="container">
  <router-view class="component"></router-view>
</div>