效果展示

前：

后：

 

未实现前代码

<template><view class="container"><view class="centered-element">我是要被居中的元素</view></view>
</template><script>export default {data() {return {title: 'Hello'}},onLoad() {},methods: {}}
</script><style>.container{border:1px solid black;height:300px;}.centered-element{border:1px solid red;}
</style>

方法一：使用Flexbox布局

核心代码 

.container {display: flex;align-items: center;
}

补充：水平居中justify-content: center;

 完整代码

<template><view class="container"><view class="centered-element">我是要被居中的元素</view></view>
</template><script>export default {data() {return {title: 'Hello'}},onLoad() {},methods: {}}
</script><style>.container{border:1px solid black;height:300px;display: flex; align-items: center;}.centered-element{border:1px solid red;}
</style>

方法二：使用position和transform属性

 核心代码

.container {position: relative;
}.centered-element {position: absolute;top: 50%;transform: translateY(-50%);
}

完整代码

<template><view class="container"><view class="centered-element">我是要被居中的元素</view></view>
</template><script>export default {data() {return {title: 'Hello'}},onLoad() {},methods: {}}
</script><style>.container {border: 1px solid black;height: 300px;position: relative;}.centered-element {border: 1px solid red;position: absolute;top: 50%;transform: translateY(-50%);}
</style>

方法三：使用table-cell布局

核心代码 

.container {display: table;height: 100%;
}.centered-element {display: table-cell;vertical-align: middle;
}

 完整代码

<template><view class="container"><view class="centered-element">我是要被居中的元素</view></view>
</template><script>export default {data() {return {title: 'Hello'}},onLoad() {},methods: {}}
</script><style>.container {border: 1px solid black;height: 300px;width:100%;display: table;}.centered-element {border: 1px solid red;display: table-cell;vertical-align: middle;}
</style>