uni-app：实现元素中实现竖直居中

效果展示

前：

后：

 

未实现前代码

<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>