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. Struts 框架 之 文件上传下载案例

    Struts 框架 文件上传 1. 先准备 Struts 环境 (我使用的是struts 2.3.4版本) 导jar包:

  3. maven工程中pom.xml的错误

    更新maven工程,出现如下错误信息. Could not calculate build plan: Failure to transfer org.apache.maven.plugins:mav ...

  4. webstrom一键上传github及使用

    对于webstrom是我参加it修真园时就推荐使用的,其他编辑器我也没什么使用过.读大学的时候还是比较喜欢 Notepad++. 现在说一下webstrom主要的关键点吧! 一.实现一键上传githu ...

  5. thinkphp分页带数据

    因为用thinkphp做分页时候点击下一页后搜索栏的数据会清空,然后点击下一页后刷新完了就没有内容了,感觉网上查找和我自己研究在不适用ajax做分页的情况下用以下代码就可以实现!!通过把值扔地址栏来进 ...

  6. ServerSocket与Socket类

    ServerSocket与Socket类 TCP套接字协议: TCP最主要的特征就是能够建立长时间的连接,而且能够保证数据安全的送达,但是速度比较慢.使用TCP进行连接的时候会有三次握手,之后才建立起 ...

  7. Oozie时出现org.apache.oozie.service.ServiceException: E0103: Could not load service classes, Cannot load JDBC driver class 'com.mysql.jdbc.Driver'

    不多说,直接上干货! 问题详情 查看你的$OOZIE_HOME/logs 我的是/home/hadoop/app/oozie-4.1.0-cdh5.5.4/logs/oozie.log文件 [hado ...

  8. Spring AOP 和 动态代理技术

    AOP 是什么东西 首先来说 AOP 并不是 Spring 框架的核心技术之一,AOP 全称 Aspect Orient Programming,即面向切面的编程.其要解决的问题就是在不改变源代码的情 ...

  9. MySQL系列（一）--基础知识大总结

    MySQL系列(一)---基础知识大总结 前言:本文主要为mysql基础知识的大总结,mysql的基础知识很多,这里只是作为简单的介绍,但是具体的细节还是需要自行搜索.当然本文还有很多遗漏的地方,后续 ...

  10. Akka（15）： 持久化模式：AtLeastOnceDelivery-消息保证送达模式

    消息保证送达是指消息发送方保证在任何情况下都会至少一次确定的消息送达.AtleastOnceDelivery是一个独立的trait,主要作用是对不确定已送达的消息进行补发,这是一种自动的操作,无需用户 ...