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. java中Long类型和long类型的大小比较

    在开发过程中老犯一些低级错误,基础还得好好加强啊...... 今天遇到这样一个问题,我用 "=="来比较两个Long类型的数据,明明数值都相等,可是结果就是false,后来仔细想想 ...

  2. Spring Boot 默认指标从哪来？

    了解有关 Spring Boot 默认指标及其来源的更多信息. 您是否注意到 Spring Boot 和 Micrometer 为您的应用生成的所有默认指标? 如果没有 - 您可以将 actuator ...

  3. linux的一些简单命令

    简单学习了一些linux相关的知识,自己做一个简单的总结,可以在一般工作中命令行状态下装装B,哈哈 正则相关 grep grep xxx yyy.file 查找出yyy文件中存在xxx的行 通配符 * ...

  4. ZOJ3435

    题意略. 思路: 将每一个点的坐标 (x,y,z) 与 (1,1,1) 相减,得到向量 (x - 1,y - 1,z - 1) 我们实际上就是要求出 这样互质的三元组有多少对就行了. 我们把这个长方体 ...

  5. 页面单击按钮弹出modaldialog然后调用ajax处理程序获取数据，给父级页面控件赋值

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="RefTopicList.asp ...

  6. 定时器Timer的运用

    1.Timer调度任务的方法

  7. Educational Codeforces Round 48 D Vasya And The Matrix

    EDU #48 D 题意:给定一个矩阵,已知每一行和每一列上数字的异或和,问矩阵上的数字是多少,不存在则输出NO. 思路:构造题,可以考虑只填最后一行,和最后一列,其中(n,m)要特判一下.其他格子给 ...

  8. 牛客-2018多校算法第五场D-集合问题+并查集

    集合问题 题意: 给你a,b和n个数p[i],问你如何分配这n个数给A,B集合,并且满足: 若x在集合A中,则a-x必须也在集合A中. 若x在集合B中,则b-x必须也在集合B中. 思路:并查集操作,自 ...

  9. 牛客暑假多校第五场 D inv

    题意:给你一个n, 接来下给你一个 [1,n] 中偶数的排列, 还有一个 [1, n] 中 奇数 按照递增的顺序排列, 现在求一个原数列, 使得偶数列排序 和 奇数列 都是原数列的一个子序列, 现在求 ...

  10. 【赛后总结+部分题解】2019中国大学生程序设计竞赛（CCPC） - 网络选拔赛

    赛后总结: T:今天状态一般,甚至有点疲惫.然后12点比赛开始,和队友开始看题,从最后往前面看,发现数学题公式看不懂.然后发现队友已经双开做1001和1006了,我看着1007有人A,开始做1007. ...