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

flex居中的更多相关文章

  1. flex 居中

    display: flex; justify-content: space-between; align-items: center;

  2. 《Web开发中让盒子居中的几种方法》

    一.记录下几种盒子居中的方法: 1.0.margin固定宽高居中: 2.0.负margin居中: 3.0.绝对定位居中: 4.0.table-cell居中: 5.0.flex居中: 6.0.trans ...

  3. css实现高度或者宽度不固定的div元素垂直左右居中

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 页面常见布局以及实现方法--flex

    页面布局是前端工程师的基本功之一,总结分析各种布局实现方法,可以让自己快速定位哪种方法实现功能,同时可以做到现最大程度的兼容. 一.水平居中 假设:最基本机构 .parent>.child 1. ...

  5. CSS3总结五：弹性盒子(flex)、弹性盒子布局

    弹性盒子容器的属性与应用 display:flex/inline-flex flex-direction flex-wrap justify-content align-items align-con ...

  6. Flex布局（二）

    接上一篇,说一下flex布局的实例,转自阮一峰老师的博客

  7. LI 导航

    HTML: <div class="my_nav"> <ul> <li class="tiao cur" id="ord ...

  8. bootstrap 使用总结

    1.如何设置一行两列? <div class="container"> <div class="row"> <div class= ...

  9. 用CSS/CSS3 实现水平居中和垂直居中，水平垂直居中的方式

    一.水平居中 (1)行内元素解决方案:父为块元素+text-align: center 只需要把行内元素包裹在一个属性display为block的父层元素中,并且把父层元素添加如下属性即可: 使用te ...

随机推荐

  1. JavaWeb 后端 <十二> 之 过滤器 filter 乱码、不缓存、脏话、标记、自动登录、全站压缩过滤器

    一.过滤器是什么?有什么? 1.过滤器属于Servlet规范,从2.3版本就开始有了. 2.过滤器就是对访问的内容进行筛选(拦截).利用过滤器对请求和响应进行过滤

  2. Sublime Text中安装插件来实现px与rem间的换算

    今天在群里无意中看到了群友分享的一篇关于移动端的文章.里面其他内容我倒不大感兴趣,反而是rem让我提起了兴趣. 首先来谈一下rem,rem是CSS3中新增加的一个单位值,它和em单位一样,都是一个相对 ...

  3. Java基础语法<十一> 异常 断言 日志 调试

    1 处理错误 1.1 异常分类 Error类层次描述了Java运行时系统的内部错误和资源耗尽错误. 设计Java程序时,主要关注Exception层次结构. 由程序错误导致的异常属于RuntimeEx ...

  4. zabbix实现邮件报警

    说明: Zabbix监控服务端.客户端都已经部署完成,被监控主机已经添加,Zabiix监控运行正常. 实现目的: 在Zabbix服务端设置邮件报警,当被监控主机宕机或者达到触发器预设值时,会自动发送报 ...

  5. Android studio中找不到so文件的问题：java.lang.UnsatisfiedLinkError

    解决Android studio中找不到so文件的问题:java.lang.UnsatisfiedLinkError 表示我们不编译jni代码,直接从libs里面复制so库 文件路径:app\buil ...

  6. 【转载】接触Matlab10年后的一个总结，随时使用Matlab要掌握的一些要点

    来源: http://www.cnblogs.com/asxinyu/p/Basic_Matlab_Experience.html 接触Matlab10年后的一个总结,随时使用Matlab要掌握的一些 ...

  7. poj_3468: A Simple Problem with Integers （树状数组区间更新）

    题目是对一个数组,支持两种操作 操作C:对下标从a到b的每个元素,值增加c: 操作Q:对求下标从a到b的元素值之和. 这道题也可以用线段树解,本文不做描述,下面分析如何用树状数组来解决这道题. 先把问 ...

  8. (转)Java多线程编程总结

    -------------------------------------------------------------------------------------------------   ...

  9. 【javascript】回调函数

    1. 定义 回调函数,即当条件满足时执行的函数.有三种方法实现调用回调函数 call 1)call 用法:call(thisObj, Obj) 主要区别:call 方法会将函数对象上下文修改为this ...

  10. Neo4j图数据库

    01. 图数据库 图数据库是专门存储和检索大量信息网络的存储引擎.它可以有效地将数据存储为节点和关系,并允许高性能检索和查询这些结构.属性可以添加到节点和关系.节点可以用零个或多个标签标注,关系总是定 ...