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

    效果展示

    前：

    后：

     

    未实现前代码

    1. <template>
    2. 	<view class="container">
    3. 		<view class="centered-element">
    4. 			我是要被居中的元素
    5. 		view>
    6. 	view>
    7. template>
    8.  
    9. <script>
    10. 	export default {
    11. 		data() {
    12. 			return {
    13. 				title: 'Hello'
    14. 			}
    15. 		},
    16. 		onLoad() {
    17.  
    18. 		},
    19. 		methods: {
    20.  
    21. 		}
    22. 	}
    23. script>
    24.  
    25. <style>
    26. 	.container{
    27. 		border:1px solid black;
    28. 		height:300px;
    29. 	}
    30. 	.centered-element{
    31. 		border:1px solid red;
    32. 	}
    33. style>

    方法一：使用Flexbox布局

    核心代码 

    1. .container {
    2.   display: flex;
    3.   align-items: center;
    4. }

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

     完整代码

    1. <template>
    2. 	<view class="container">
    3. 		<view class="centered-element">
    4. 			我是要被居中的元素
    5. 		view>
    6. 	view>
    7. template>
    8.  
    9. <script>
    10. 	export default {
    11. 		data() {
    12. 			return {
    13. 				title: 'Hello'
    14. 			}
    15. 		},
    16. 		onLoad() {
    17.  
    18. 		},
    19. 		methods: {
    20.  
    21. 		}
    22. 	}
    23. script>
    24.  
    25. <style>
    26. 	.container{
    27. 		border:1px solid black;
    28. 		height:300px;
    29. 		display: flex; 
    30. 		align-items: center;
    31. 	}
    32. 	.centered-element{
    33. 		border:1px solid red;
    34. 	}
    35. style>

    方法二：使用position和transform属性

     核心代码

    1. .container {
    2.   position: relative;
    3. }
    4.  
    5. .centered-element {
    6.   position: absolute;
    7.   top: 50%;
    8.   transform: translateY(-50%);
    9. }

    完整代码

    1. <template>
    2. 	<view class="container">
    3. 		<view class="centered-element">
    4. 			我是要被居中的元素
    5. 		view>
    6. 	view>
    7. template>
    8.  
    9. <script>
    10. 	export default {
    11. 		data() {
    12. 			return {
    13. 				title: 'Hello'
    14. 			}
    15. 		},
    16. 		onLoad() {
    17.  
    18. 		},
    19. 		methods: {
    20.  
    21. 		}
    22. 	}
    23. script>
    24.  
    25. <style>
    26. 	.container {
    27. 		border: 1px solid black;
    28. 		height: 300px;
    29. 		position: relative;
    30. 	}
    31.  
    32. 	.centered-element {
    33. 		border: 1px solid red;
    34. 		position: absolute;
    35. 		top: 50%;
    36. 		transform: translateY(-50%);
    37. 	}
    38. style>

    方法三：使用table-cell布局

    核心代码 

    1. .container {
    2.   display: table;
    3.   height: 100%;
    4. }
    5.  
    6. .centered-element {
    7.   display: table-cell;
    8.   vertical-align: middle;
    9. }

     完整代码

    1. <template>
    2. 	<view class="container">
    3. 		<view class="centered-element">
    4. 			我是要被居中的元素
    5. 		view>
    6. 	view>
    7. template>
    8.  
    9. <script>
    10. 	export default {
    11. 		data() {
    12. 			return {
    13. 				title: 'Hello'
    14. 			}
    15. 		},
    16. 		onLoad() {
    17.  
    18. 		},
    19. 		methods: {
    20.  
    21. 		}
    22. 	}
    23. script>
    24.  
    25. <style>
    26. 	.container {
    27. 		border: 1px solid black;
    28. 		height: 300px;
    29.         width:100%;
    30. 		display: table;
    31. 	}
    32.  
    33. 	.centered-element {
    34. 		border: 1px solid red;
    35. 		display: table-cell;
    36. 		vertical-align: middle;
    37. 	}
    38. style>

     

  • 相关阅读:
    Fast-MVSNet CVPR-2020 学习笔记总结 译文 深度学习三维重建
    算法之数论知识点总结
    docker 部署私人 nuget 服务
    imx6ull 以太网
    uni-app:标签中对数据进行判断，看数据前中后是否含有需要的字符startsWith()，endsWith()，includes()
    FastText词向量计算和文本分类工具
    【leetcode】重排链表
    FFmpeg的详细介绍
    腾讯待办停止运营，怎么继续提醒事情呢？
    IDEA最实用的设置
  • 原文地址：https://blog.csdn.net/weixin_46001736/article/details/133266425