方法一:使用CSS3 transform

父盒子设置：position:relative;

div设置：position:absolute;transform:translate(-50%,-50%);top:50%;left:50%;

方法二：使用display:table-cell

父盒子设置：display:table-cell;text-align:center;vertical-align:middle;

div设置：display:inline-block;vertical-align:middle;

方法三：使用CSS3 flex

父盒子设置：display:flex;justify-content:center;align-items:center;

怎么让一个不定宽高的div垂直水平居中？的更多相关文章

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

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

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

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

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

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

  4. CSS之文本溢出隐藏，不定宽高元素垂直水平居中、禁止页面文本复制

    1.如何让不固定元素宽高的元素垂直水平居中 .center { position: absolute; top: 50%; left: 50%; background-color: #000; wid ...

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

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

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

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

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

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

  8. 实现可调整宽高的DIV（左右拖动和上下拖动）

    前言 本例是在React中实现,不过改一改通过原生js也很好实现,另外兼容性也做到了IE9.(IE8讲道理也是可以的). 首先看一下需要实现的需求: 要拖动图中的白色横条调整绿色和蓝色区域的高度,要拖 ...

  9. css3之transform属性实现div不定宽高垂直水平居中

    transform的作用 transform 属性向元素应用 2D 或 3D 转换.该属性允许我们对元素进行旋转.缩放.移动或倾斜.(w3cschool) transform的兼容性 transfor ...

随机推荐

  1. Censoring【自动AC机】【水题毁我青春】【20190614】

    这题简直比注水猪肉还水QAQ. 以前做过KMP的Censoring单串匹配,果断选择自动AC机w 对短串建自动AC机 长串去机子里匹配 用个栈边匹配边弹出 记得弹出一个串后把匹配点指向栈顶就ojbk ...

  2. System.Web.Mvc.FileResultc.sc

    ylbtech-System.Web.Mvc.FileResultc.sc 1.程序集 System.Web.Mvc, Version=5.2.3.0, Culture=neutral, Public ...

  3. 按钮事件v-on

    <!DOCTYPE html> <html lang="zh"> <head> <title></title> < ...

  4. HDU 3923 Invoker | 暑训Day1 C题填坑

    暑训第一天,专题为组合数学与概率期望. 最近一个月都没有学习新的知识,上午听聚聚讲课头脑都是一片空白.加上长期没刷题,下午做练习题毫无感觉.到晚上总算理清了蓝书上的一些概念,跟着榜单做题.最后唯独剩下 ...

  5. hdu 1754 I Hate It （线段树）

    原题链接:http://acm.hdu.edu.cn/showproblem.php?pid=1754 线段树的模板题,详细的都写在代码里了 //不知道为什么定义单个字符,用%c输入会超时,换成字符数 ...

  6. PAT甲级——A1094 The Largest Generation

    A family hierarchy is usually presented by a pedigree tree where all the nodes on the same level bel ...

  7. 操作系统-CPU调度

    概念 控制.协调多个进程对CPU的竞争 即按一定的调度算法从就绪队列中选择一个进程,把CPU的使用权交给被选中的进程 场景 N个进程就绪,等待上M(M>=1)个CPU运行,需要决策哪个进程分配给 ...

  8. linux最基础最常用的命令快速手记 — 让手指跟上思考的速度（三）

    这一篇作为姐妹篇的第三篇,废话不多说,我觉得这个比mysql的还要重要,为什么,一旦你摊上linux 敲键盘输入命令简直是要飞的速度,不断的卡壳查命令,效率太低了,而且非常严重的影响思绪,思绪! 某些 ...

  9. scrapy中的ImagePipeline下载图片到本地、并提取本地的保存地址

    通过scrapy内置到ImagePipeline下载图片到本地 在settings中打开 ITEM_PIPELINES的注释,并在这里面加入 'scrapy.pipelines.images.Imag ...

  10. java最常用的几种加密算法

    1. BASE64 Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一,大家可以查看RFC2045-RFC2049,上面有MIME的详细规范.Base64编码可用于在HTTP环境下传递 ...