1 justify-content:center;//子元素水平居中

2 align-items:center;//子元素垂直居中

3 display:-webkit-flex;

在父级元素上面加上上面3句话，就可以实现子元素水平垂直居中。

css3不定宽高水平垂直居中的更多相关文章

  1. div 固定宽高 水平垂直居中方法

    div固定宽高,水平垂直居中,根据所用单位不同,分成两种情况,分别是"px"和"%"情况. 例:将三层div做出三个边框,要求水平垂直居中.效果如图 情况一(单 ...

  2. css/css3 未知元素宽高，垂直居中和水平居中

    未知元素的宽高情况下  垂直居中和水平居中 第一种 flex盒布局 (推荐) /*弹性盒模型*/ /*主轴居中对齐*/ /*侧轴居中对齐*/ .ele{ display:flex; justify-c ...

  3. css中固定宽高div与不固定宽高div垂直居中的处理办法

    固定高宽div垂直居中 如上图,固定高宽的很简单,写法如下: position: absolute; left: 50%; top: 50%; width:200px; height:100px; m ...

  4. css两种常用的不定宽高的水平垂直居中方法，记住它，不再为样式发愁

    css 几种常用的简单容易记住的水平垂直居中方法 前言 正文 第一种方法 第二种方法 结束语 前言 我们在设计网页时,会大量的运用到水平垂直居中,如果知道元素的宽高,那水平垂直居中是很简单的,无非是用 ...

  5. css实现不定宽高的div水平、垂直居中

    一共有三个方案: 1,第一种方案主要使用了css3中transform进行元素偏移,效果非常好 这方法功能很强大,也比较灵活,不仅仅局限在实现居中显示.  兼容方面也一样拿IE来做比较,第二种方法IE ...

  6. 不定宽高的文字在div中垂直居中

    本人在面试的时候被问到:如何使一段不定宽高的文字垂直居中呢? 现在来总结一下: 在body中写入结构 <div id="main">    <div id=&qu ...

  7. 不定宽高的DIV，垂直水平居中

    1.怎么让一个不定宽高的DIV,垂直水平居中? 答:1)使用CSS方法. 父盒子设置: display:table-cell; text-align:center; vertical-align:mi ...

  8. Css动画形式弹出遮罩层，内容区上下左右居中于不定宽高的容器中

    <!DOCTYPE html> <html> <head> </head> <body id="body"> <! ...

  9. css实现div不定宽高垂直水平居中解决方案

    在项目中我们经常能碰见然图片垂直水平居中,不定宽高的div垂直水平居中,等等~~ 现在我将介绍我所知道的几种用css来解决的几种方案. 1.父元素text-align:center;display:t ...

随机推荐

  1. **p，*p和&p使用有感

    *p两种使用情况: 1.定义指针变量,如char *p:这里p是一个变量,单单在这一点上与int a 无差别:但p这个变量特殊在其中只能存地址. 引申:对于char **p,p中存一个地址add1,a ...

  2. c++智能指针介绍

    C++11标准引入了boost库中的智能指针,给C++开发时的内存管理提供了极大的方便.接下来这篇文件介绍shared_ptr/weak_ptr内部实现原理及使用细节. C++不像java有内存回收机 ...

  3. deepin 15.11 成功安装 jupyter notebook

    系统环境: OS:deepin 15.11(均为系统默认配置) Anaconda Distribution 64位(x86)安装程序(517 MB) Jupyter 官方提供三种安装方式:conda. ...

  4. CSS3 transform封装

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. 持续集成高级篇之Jenkins Pipeline git拉取

    系列目录 PipeLine中拉取远程git仓库 前面讲自由式任务的时候,我们可以看到通过自由式job里提供的图形界面配置git拉取非常方便的,实际上使用PipeLine也并不复杂.这一节我们展示一下如 ...

  6. mybatis 源码分析（七）KeyGenerator 详解

    一.KeyGenerator 概述 在平时开发的时候经常会有这样的需求,插入数据返回主键,或者插入数据之前需要获取主键,这样的需求在 mybatis 中也是支持的,其中主要的逻辑部分就在 KeyGen ...

  7. 你知道JavaScript这六种错误类型吗？

    前言 今日话题,了解JavaScript的错误处理机制. 一.ReferenceError 引用一个不存在的变量时发生的错误.将一个值分配给无法分配的对象,比如对函数的运行结果或者函数赋值. 举栗子 ...

  8. 转载-Springboot整合ehcache缓存

    转载:https://www.cnblogs.com/xzmiyx/p/9897623.html EhCache是一个比较成熟的Java缓存框架,最早从hibernate发展而来, 是进程中的缓存系统 ...

  9. Python实现 下载IJCAI会议所有论文

    import requests import threading def get_file_content(num): savepath = '%04d.pdf' % (num) suburl = ' ...

  10. Prim算法、Kruskal算法、Dijkstra算法

    无向加权图 1.生成树(minimum spanning trees) 图的生成树是它一棵含有所有顶点的无环联通子图 最小生成树:生成树中权值和最小的(所有边的权值之和) Prim算法.Kruskal ...