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. vue2.0引入腾讯地图

    百度很多东西,然后我没找到腾讯地图在VUE2.0里面的引用.于是根据找的其他地图引用资料进行尝试.步骤如下. 首先在src里面建立了TMap.js的文件,内容如下: export function T ...

  2. webpack教程(三)——热刷新

    现在我们如果修改代码,需要重新打包,再一次在命令行下输入webpack命令,很麻烦. 热刷新是什么呢?就是我们该完代码保存之后webpack会自动打包引起浏览器自动刷新,你只需要把精力都专注在代码研发 ...

  3. SpringEL 表达式错误记录

    原因暂时未知....

  4. Struts2+Spring+Hibernate+Jbpm技术实现Oa（Office Automation）办公系统第一天框架搭建

    =============编码规范,所有文健,所有页面,所有数据库的数据表都采用UTF-8编码格式,避免乱码:===========开发环境:jdk1.7+tomcat8.0+mysql5.7+ecl ...

  5. MySQL oracle 分页

    (1)MySql的Limit m,n语句 Limit后的两个参数中,参数m是起始下标,它从0开始:参数n是返回的记录数.我们需要分页的话指定这两个值即可. 比如:查询10行记录,起始行从3开始 SEL ...

  6. RxSwift 系列(六) -- Mathematical and Aggregate Operators

    前言 本篇文章将要学习RxSwift中数学和集合操作符,在RxSwift中包括了: toArray reduce concat toArray 将一个Observable序列转化为一个数组,并转换为一 ...

  7. Angular02 将数据添加到组件中

    准备:已经搭建好angular-cli环境.知道如何创建组件 一.将一个数据添加到组件中 1 创建一个新的组件 user-item 2 将组件添加到静态模板中 3 为组件添加属性,并利用构造器赋值 4 ...

  8. vue数据驱动作用域问题

    需求是这样的,如图 点击禁用后,变成启用,但是结果却不让人满意 我们先来看一下错误代码: //conponet控件里的内容 html内容: <div> <button @click. ...

  9. Objective-C 使用核心动画CAAnimation实现动画

    先来看看效果吧 整个核心动画就不多做介绍了,随便一搜就能有很多很详细的解释,主要使用以下四种 CABasicAnimation //经典动画 CAKeyframeAnimation //关键帧动画 C ...

  10. css3关键帧动画实现轮播效果

    实现效果:打开手机京东,可以看到首页的头部,以这个头部为基础,仿写一个类似的样式. 思路:仔细观察可以发现,手机京东的头部是以一个搜索栏和轮播特效组成的,而这个搜索栏是以轮播特效做为背景的,现在运用c ...