1.先把父元素display:flex

2.在父元素设置justify-content:center;水平居中

3.在父元素设置align-items:center;垂直居中

align-items 属性定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。

justify-content 用于设置或检索flex元素在主轴(横轴)方向上的对齐方式。

flex-direction :row | row-reverse | column | column-reverse   direction属性决定主轴的方向(即项目的排列方向)。

flex 主轴是哪个就定义哪个的长度,会覆盖width和height

最新文章

  1. ContentProvider中央档案馆,以及获取联系人电话的示例
  2. jQuery简单的手风琴菜单
  3. BZOJ 1968: [Ahoi2005]COMMON 约数研究
  4. 【Codeforces718C】Sasha and Array 线段树 + 矩阵乘法
  5. MWeb for iOS 测试版介绍
  6. eval回显变量
  7. WCF Failed to invoke the service. Possible causes: The service is offline or inaccessible
  8. JS - Object and Property的删除用法
  9. CSS中vw和vh单位的使用
  10. Linux/Unix中的#!和!#
  11. HDU 1164 Eddy's research I
  12. 编写一个循环将list容器的元素逆序输出
  13. PHP 中运用 elasticsearch
  14. 2016021801 - Java内存区域归纳对比
  15. LeetCode_Permutation Sequence
  16. eclipse主题插件
  17. 基于Java的开源CMS系统选择(转)
  18. C# - 设计模式 - 模板模式
  19. 用简单的代码让一组静态图片变成gif动画
  20. 环境部署(八):jenkins配置邮件通知

热门文章

  1. P3390 【模板】矩阵快速幂
  2. windows安装程序无法将windows配置为在此计算机的硬件上运行
  3. Java--回调接口
  4. (转)ManyToMany注解
  5. 【iOS干货】☞ Socket
  6. Spring AOP 和 动态代理技术
  7. hashcode-equals方法
  8. (转)HashMap深入原理解析
  9. matlab图片清晰度调整
  10. 【基础网络】TCP与UDP 的区别