当 display: flex 配合 justify-content: center 使用时可以让view水平居中

而配合 align-items: center 用时可以实现垂直居中效果

.card-image-container{
　　width: 40%;
　　height: 90%;
　　align-items: center;　　/** 垂直居中*/
　　display: flex;
　　justify-content: center; 　　/** flex 属性， 水平居中**/
}
 
 

微信小程序 view中的image水平垂直居中的更多相关文章

  1. 微信小程序 View：flex 布局

    微信小程序 View 支持两种布局方式:Block 和 Flex 所有 View 默认都是 block 要使用 flex 布局的话需要显式的声明: display:flex; 下面就来介绍下微信小程序 ...

  2. 全栈开发工程师微信小程序-上(中)

    全栈开发工程师微信小程序-上(中) width: 750rpx; 750rpx代表与屏幕等宽,rpx的缩写responsive pixel,这个单位是可以根据屏幕大小进行自适应调整的像素单位. 小程序 ...

  3. 总结微信小程序开发中遇到的坑

    总结微信小程序开发中遇到的坑,一些坑你得一个一个的跳啊,/(ㄒoㄒ)/~~ 1,页面跳转和参数传递实例 首先说一下我遇到的需求有一个我的消息页面,里面的数据都是后端返回的,返回的数据大致如下,有一个是 ...

  4. 微信小程序开发过程中tabbar页面显示的相关问题及解决办法！

    在微信小程序的开发过程中如果有使用过tabbar的同学,我相信一定会遇到一些困扰.为什么有些时候代码中明明已经在app.json里面增加了tabbar,可以页面中就是不显示呢?可不可以有些页面显示ta ...

  5. 解决微信小程序开发中wxss中不能用本地图片

    微信小程序开发中wxss中不能用本地图片,我们可以用将我们的图片传到服务器上,然后直接引用在线地址.但是当我们没有服务器时,我们可以用"图床",这个具体可以百度.这里我们用第二种方 ...

  6. 微信小程序 开发过程中遇到的坑（一）

      2124 1.我们使用app.json文件来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设置网络超时时间.设置多 tab 的时候在pages中写注释的时候回报错. 例如: { &quo ...

  7. 微信小程序开发中的二三事之网易云信IMSDK DEMO

    本文由作者邹永胜授权网易云社区发布. 简介 为了更好的展示我们即时通讯SDK强悍的能力,网易云信IM SDK微信小程序DEMO的开发就提上了日程.用产品的话说就是: 云信 IM 小程序 SDK 的能力 ...

  8. 微信小程序开发中如何实现侧边栏的滑动效果？

    原文链接:https://mp.weixin.qq.com/s/7CM18izpZqf0oc0D75IGmQ 1 概述 在手机应用的开发中侧边栏滑动是很常见的功能,当然在小程序中也不会例外,很多特效还 ...

  9. [技术博客]微信小程序开发中遇到的两个问题的解决

    IDE介绍 微信web开发者工具 前端语言 微信小程序使用的语言为wxml和wss,使用JSON以及js逻辑进行页面之间的交互.与网页的html和css略有不同,微信小程序在此基础上添加了自己的改进, ...

随机推荐

  1. DesktopLayer.exe专杀

    这两天发现电脑卡慢. 同事电脑发现病毒,而后装上杀软后(一直在裸奔~~~),发现自己电脑也存在. DesktopLayer.exe 会有以下几个行为: 第一,会在C:\Program Files (x ...

  2. PHP配置环境中如何开启伪静态

    1.在httpd.conf中引入httpd-vhosts.conf 2.在httpd.conf中开启mod_rewrite.so 3.在httpd-vhosts.conf中配置虚拟主机 AllowOv ...

  3. web前端学习（二）html学习笔记部分（7）--web存储2

    1.2.20  web存储 1.2.20.1  Web存储-客户端存储数据新方法 1.两种方式 1)localStorage - 没有时间限制的数据存储 2)针对一个sessionStorage - ...

  4. Expires

    (装载) 简要:添加Expires头能有效的利用浏览器的缓存能力来改善页面的性能,能在后续的页面中有效避免很多不必要的Http请求,WEB服务器使用Expires头来告诉Web客户端它可以使用一个组件 ...

  5. Spring Boot：Boot2.0版本整合Neo4j

    前面介绍了Boot 1.5版本集成Neo4j,Boot 2.0以上版本Neo4j变化较大. 场景还是电影人员关系 Boot 2.0主要变化 GraphRepository在Boot2.0下不支持了,调 ...

  6. Python数据分析与展示[第一周]

    ipython 中的问号 获得相关的描述信息 %run 系统文件 执行某一个文件 ipython的模式命令 %magic 显示所有的魔术命令 %hist    命令历史输入信息 %pdb    异常发 ...

  7. POJ1485 Sumdiv

    Sumdiv Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 22680   Accepted: 5660 Descripti ...

  8. sqlserver 带返回值的存储过程

    create proc test ) output as begin select @result = 'haha' ; end go ), @count int exec @count = test ...

  9. 【Leetcode 堆、快速选择、Top-K问题 BFPRT】数组中的第K个最大元素（215）

    这道题很强大,引出了很多知识点 题目 在未排序的数组中找到第 k 个最大的元素.请注意,你需要找的是数组排序后的第 k 个最大的元素,而不是第 k 个不同的元素. 示例 1: 输入: [3,2,1,5 ...

  10. thinkphp5.0 模板输出常用内容

    1.在模板获取session和cookie等全局变量 {$Think.session.user_id}//输出$_SESSION['user_id']变量 2.获取请求信息 {$Request.con ...