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. 给xcode项目修改名字

    在xcode项目开发中,经常会遇到需要修改项目名字的问题, 但是xcode本身修改项目名字比较麻烦,有时候修改的不完全,有时候修改了项目无法打开,无奈只能建一个新项目.这里提供一种修改xcode项目名 ...

  2. Java之初识

    今天开始学习Java 1.什么是Java? Java是1995年由sun公司推出的一门极富创造力的面向对象编程语言,是由Java之父詹姆斯格斯林博士设计的. Java名字的由来:据说,java刚刚设计 ...

  3. 设计模式 - 代理模式（jdk）

    定义:为另一个对象提供一个替身或占位符以控制对这个对象的访问. 一.静态代理 静态代理说白了就是把原先直接调用被代理类的方法放到代理类来调用,同时 我们可以在代理类额外的添加一些操作. 接口: pac ...

  4. 8位基本定时器（TIM4）

    简介:该定时器由一个带可编程预分频器的8位自动重载的向上计数器所组成,它可以用来作为时基发生器,具有溢出中断功能. 主要功能: (1)8位向上计数的自动重载计数器: (2)3位可编程的预分配器(可在运 ...

  5. python新手之2变量

    变量 变量是将储存的值保存在内存中.当声明一个变量的时候会在内存中开辟一个储存内容的位置. 基于变量的数据类型,解释器分配内存空间并决定储存的内容.因此我们可以通过变量分配不同的数据类型,可以在变量中 ...

  6. Python爬虫从入门到放弃（十三）之 Scrapy框架的命令行详解

    这篇文章主要是对的scrapy命令行使用的一个介绍 创建爬虫项目 scrapy startproject 项目名例子如下: localhost:spider zhaofan$ scrapy start ...

  7. Android_65535问题的解决

    做过比较大的项目的人都知道,当app大到一定程度的时候,会出现65535这个错误,也就是64K,也就是,一个app包中,方法数不能超过65535个,超过了就要分成多个dex包,这个别问为什么,andr ...

  8. docker~大叔对术语的解释

    回到目录 接触和使用docker已经有1年多了,起初对概念本身理解的不是很好,或者说,没有找到一本比较好的书,在自己的研究下,对docker一些基本的概念有了自己的一些认识和看法,现在分享给正在学习d ...

  9. Android - 电池状态

    为了解决电池图标的问题,顺带看了看电池信息的获取方法 :自己写了一个小栗子,来验证一下效果 电池的信息,一般都在BatteryManager里面,信息是用广播发出的.我们更新信息需要一个广播接收器 注 ...

  10. （转）添加eclipse、MyEclipse、Spring Tool Suite的反编译插件

    很多兄弟为在IDE里看不到源代码类而不得不下一个反编译工具,但是这样会降低代码效率,如果能直接在IDE里看,何乐而不为呢!现在我整理了一下网上很多兄弟的设置反编译的经验. 可分为下面几步. 1 下载J ...