方法一:使用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. 关于前端调用后端php数据跨域的问题

    https://blog.csdn.net/qq_21386275/article/details/87269979 js前端 <!DOCTYPE html><html>< ...

  2. 小米手机的miui10 连接电脑。本地播放器推荐。

    问题: 电脑连接了手机却不能看到手机里面的文件. 方法一 方法二 连接和电脑一样的wifi 进入文件管理 来自:百度经验. 本地播放器推荐 爱奇艺万能播放器(还不错,目前在用).qq影音 爱奇艺万能播 ...

  3. 图数据库neo4j和关系数据库的区别

    相信您和我一样,在使用关系型数据库时常常会遇到一系列非常复杂的设计问题.例如一部电影中的各个演员常常有主角配角之分,还要有导演,特效等人员的参与.通常情况下这些人员常常都被抽象为Person类型,对应 ...

  4. java中生成不重复随机的数字

    Java中产生随机数 1 . 调用java.lang下面Math类中的random()方法产生随机数 新建一个文件后缀名为java的文件,文件名取为MyRandom,该类中编写如下的代码: publi ...

  5. python中defaultdict方法的使用

    默认值可以很方便 众所周知,在Python中如果访问字典中不存在的键,会引发KeyError异常(JavaScript中如果对象中不存在某个属性,则返回undefined).但是有时候,字典中的每个键 ...

  6. Spring注解驱动开发(四)-----aop、声明式事务

    AOP 概念 指在程序运行期间动态的将某段代码切入到指定方法指定位置进行运行的编程方式:-----基于动态代理 一个aop示例 1.导入aop模块:Spring AOP:(spring-aspects ...

  7. node.js 安装步骤

    1.打开链接(http://nodejs.cn/download/) 2.下载自己所需的安装包(32位 or 64位.哪个系统) 3.双击直接安装(成功如下图) 4.点击 Node.js comman ...

  8. pycharm新手入门

    1.新建项目 2.配置 3.create 4.新建.py文件 5.可以愉快的敲代码啦

  9. web api中允许跨域访问

    ①添加owin的引用 ②添加owin.Cors的引用 ③在WebApiConfig中添加 config.EnableCors(new EnableCorsAttribute("*" ...

  10. 免费提取百度文库 doc 文件

    首先说明,今天要推荐的这款软件,不能不能不能免费提取百度文库里 PDF 格式的文件. 对于其他的格式,无论收费与否都能免费提取. 只是口头说说免不了耍流氓的嫌疑,举栗如下: 百度文库里<喜迎党的 ...