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. POST提交数据方式

    application/x-www-form-urlencoded 这应该是最常见的 POST 提交数据的方式了.浏览器的原生 form 表单,如果不设置 enctype 属性,那么最终就会以 app ...

  2. 启xin宝app的token算法破解——frida篇（四）

    前两篇文章分析该APP的抓包.的逆向: 启xin宝app的token算法破解--抓包分析篇(一) 启xin宝app的token算法破解--逆向篇(二) 启xin宝app的token算法破解--toke ...

  3. unity之单例模式

    Unity中常见的四种单例 点击进入

  4. Leetcode之深度优先搜索（DFS）专题-130. 被围绕的区域（Surrounded Regions）

    Leetcode之深度优先搜索(DFS)专题-130. 被围绕的区域(Surrounded Regions) 深度优先搜索的解题详细介绍,点击 给定一个二维的矩阵,包含 'X' 和 'O'(字母 O) ...

  5. JavaScript算法模式——动态规划和贪心算法

    动态规划 动态规划(Dynamic Programming,DP)是一种将复杂问题分解成更小的子问题来解决的优化算法.下面有一些用动态规划来解决实际问题的算法: 最少硬币找零 给定一组硬币的面额,以及 ...

  6. 一文带您了解 Elasticsearch 中，如何进行索引管理（图文教程）

    欢迎关注笔者的公众号: 小哈学Java, 每日推送 Java 领域干货文章,关注即免费无套路附送 100G 海量学习.面试资源哟!! 个人网站: https://www.exception.site/ ...

  7. FastDFS初印象

    是什么?         FastDFS是一个轻量级分布式文件系统. 能干嘛?         对文件进行管理,功能包括:文件存储.文件同步.文件访问(文件上传.文件下载)等. 相关概念        ...

  8. Spring源码解析之ConfigurableApplicationContext

    UML图 接口的作用 从上面的UML图中,可以看到 ConfigurableApplicationContext 直接继承了 ApplicationContext, Lifecycle, Closea ...

  9. Installing the JMeter CA certificate for HTTPS recording

    参考: http://jmeter.apache.org/usermanual/component_reference.html#HTTP(S)_Test_Script_Recorder User m ...

  10. P1640 [SCOI2010]连续攻击游戏 二分图构造

    https://www.luogu.org/problemnew/show/P1640 题意 lxhgww最近迷上了一款游戏,在游戏里,他拥有很多的装备,每种装备都有2个属性,这些属性的值用[1,10 ...