一共有三个方案：

1，第一种方案主要使用了css3中transform进行元素偏移，效果非常好

这方法功能很强大，也比较灵活，不仅仅局限在实现居中显示。  兼容方面也一样拿IE来做比较，第二种方法IE8以上都能使用。  IE8及IE8以下都会出现问题。

<body>

    <div id="box">

        <div id="content">div被其中的内容撑起宽高</div>

    </div>

</body>
body,html { margin:; width:100%; height:100%; }

#box { width:100%; height:100%; background:rgba(0,0,0,0.7); position:relative; }

#content{ position:absolute; background:pink; left:50%; top:50%;

transform:translateX(-50%) translateY(-50%);

-webkit-transform:translateX(-50%) translateY(-50%); }

2，第二种利用flex进行布局

很简单几句代码就实现了。可惜IE浏览器并不怎么支持display:flex;

<body>

    <div id="box">

        <div id="content">div被内容撑起宽高</div>

    </div>

</body>
body,html { margin:; width:100%; height:100%; }

#box { width:100%; height:100%; background:rgba(0,0,0,0.7); display:flex; justify-content:center; align-items:center; }

#content {width:50%; height:50%; background:pink; }

3，兼容性最好的方案（不能算严格意义上的不定宽高，子div不能根据内容大小做改变）：

　第一种方法出现的比较早。兼容拿IE来做参照——>第一种方法IE7以上都能使用，IE7及IE7以下都会出现问题。

　

<body>

    <div id="box">

        <div id="content"></div>

    </div>

</body>
body,html { margin:; width:100%; height:100%; }

#box { width:100%; height:100%;background:rgba(0,0,0,0.7); position:relative;}

#content { width:50%; height:50%; background:pink; position:absolute; top:; right:; bottom:; left:; margin:auto; }

原理不是很明白，但是这种方式并不完善，content只能设置固定宽高，无甚意义。

css实现不定宽高的div水平、垂直居中的更多相关文章

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

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

  2. CSS Transform让百分比宽高布局元素水平垂直居中

    很早以前了解过当元素是固定宽度和高度的时候,水平垂直高居中的方法可以设置margin的负值来使其居中,这个负值是元素的宽和高的一半,比如宽高是100px,那么就用margin-left:-50px;m ...

  3. 怎么让一个不定宽高的div垂直水平居中？

    方法一:使用CSS3 transform 父盒子设置:position:relative; div设置:position:absolute;transform:translate(-50%,-50%) ...

  4. div水平垂直居中方法及优缺点

    代码: <div class="father"> <div class="son"> </div></div> ...

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

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

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

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

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

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

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

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

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

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

随机推荐

  1. 头大！RabbitMQ 和 Kafka 到底怎么选？

    前言 开源社区有好多优秀的队列中间件,比如RabbitMQ和Kafka,每个队列都貌似有其特性,在进行工程选择时,往往眼花缭乱,不知所措. 对于RabbitMQ和Kafka,到底应该选哪个? Rabb ...

  2. [ZJOI2007]时态同步 题解

    题面 这道题是一道比较水的XXOI题: 我们可以发现,反着思考题目就变为了让所有叶子节点同时发出信号,然后这些信号同时到达根节点: 可以证明,这样答案不会改变: 那么我们可以自下而上dfs(),设f[ ...

  3. mysql 聚合函数(2)

    平均 svg select avg(sal + IFNULL(comm,0)) as avg_sal from t_emp 总和 sum select sum(sal + IFNULL(comm,0) ...

  4. ActiveMQ消息过滤

    前言 ActiveMQ提供了一种机制,使用它,消息服务可根据消息选择器中的标准来执行消息过滤.生产者可在消息中放入应用程序特有的属性,而消费者可使用基于这些属性的选择标准来表明对消息是否感兴趣.这就简 ...

  5. Quatrz + Spring

    实例工程结构: 配置: pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi=" ...

  6. 20180115-Xcode创建多个工程协同开发

    今天研究了一下在Xcode中创建多个工程,达到模块化的目的的同时,实现多个相似项目的协同开发,最主要的是可以实现多工程连编.项目的效果如下: 接下来创建一个这样的项目,以及他们之间的通信 1.建一个文 ...

  7. 三、使用Fiddler劫持网络资源(手机端)

    一.使用说明https://www.cnblogs.com/woaixuexi9999/p/9247705.html

  8. ceph对接openstack

    一.使用rbd方式提供存储如下数据: (1)image(glance):保存glanc中的image: (2)volume(cinder)存储:保存cinder的volume:保存创建虚拟机时选择创建 ...

  9. 014-Zabbix的自动发现

    Zabbix自动发现是通过(1)网络扫描或(2)代理主动发现实现监控.本文主要介绍网络扫描的发现方式,并深入介绍底层监控项的主动发现功能. 网络发现(Discovery) 对于网络发现最需要理解的就是 ...

  10. (转) IntelliJ IDEA2018激活

    IntelliJ IDEA2018破解教程 破解方法:下载破解补丁→修改配置文件→输入激活码→激活成功 由于JetBrains封杀,大部分激活服务器已经不能使用,使用下面的比较麻烦的方法也可以进行破解 ...