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. Spark Standalone Mode Configuration

    For currently popular distributed framework Spark, here is the intro and step to configure the spark ...

  2. 使用C#创建简单的WCF服务

    一.开发环境 操作系统:Windows 10 开发环境:VS2015 编程语言:C# IIS版本:10.0.0.0 二.添加WCF服务.Internet Information Services(II ...

  3. CSS命名实践

    前面的话 每次写HTML结构涉及到CSS命名时,都要挣扎一番.关于CSS命名的规范,市面上有不少,如OOCSS.SMACSS.BEM和MVCSS等.在这里面最火的应该算BEM了.本文将详细介绍CSS命 ...

  4. Java编程思想总结笔记Chapter 2

    本章介绍Java程序的基本组成部分,体会到Java中几乎一切都是对象. 第二章   一切都是对象 目录: 2.1 用引用操纵对象 2.2 必须由你创建所有对象 2.3 永远不需要销毁对象 2.4 创建 ...

  5. Oracle之plsql快速入门

    打开系统输出 set serveroutput on; 只需要打开一次**书写格式 以斜杠/号 结束(基本结构) --declare --语句后面必须以;号结束 declare --用来区分变量名和表 ...

  6. Threads（线程）（二）

    前一章我们提到了同步异步,多线程:在开始今天的文章之前,先来总结一下上一篇文章的内容,多线程的优点. 多线程有哪些优点呢,在这里通过代码依次来总结. 异步多线程的三大特点 1)同步方法卡界面,原因是主 ...

  7. vue 实现 tomato timer（蕃茄钟）

    近期在学习[时间管理]方面的课程,其中有一期讲了蕃茄工作法,发现是个好多东西.蕃茄工作法核心思想就是:工作25分钟,休息5分钟.如果您好了解更多可以自行度娘. 在加上本人是一个程序猿,就想用程序的方式 ...

  8. join和wait

    最近看多线程的时候发现对于join的理解有些错误,在网上查了不少资料,根据自己的理解整理了一下,这里之所以把join和wait放在一起,是因为join的底层实现就是基于wait的,一并讲解更容易理解. ...

  9. zoj 3963 heap partion

    https://vjudge.net/problem/ZOJ-3963 题意: 给出一个数列,可以用这个数列构造一种二叉树,这个二叉树满足数的下标 i <= j,并且 si <= sj,s ...

  10. 在Unity3D项目中接入ShareSDK实现安卓平台微信分享功能（可使用ShareSDK默认UI或自定义UI）

    最近公司的大厅要重做,我协助主程一起制作新大厅和新框架,前面制作的编辑器也派上了用场.等全部功能做完后我会再写一个复盘,这两天主程在忙于写热更新的功能,所以把接入分享SDK功能的任务交给了我,Shar ...