一共有三个方案：

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

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

  1. <body>
  2.     <div id="box">
  3.         <div id="content">div被其中的内容撑起宽高</div>
  4.     </div>
  5. </body>
  1. body,html { margin:; width:100%; height:100%; }
  2. #box { width:100%; height:100%; background:rgba(0,0,0,0.7); position:relative; }
  3. #content{ position:absolute; background:pink; left:50%; top:50%;
  4. transform:translateX(-50%) translateY(-50%);
  5. -webkit-transform:translateX(-50%) translateY(-50%); }

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

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

  1. <body>
  2.     <div id="box">
  3.         <div id="content">div被内容撑起宽高</div>
  4.     </div>
  5. </body>
  1. body,html { margin:; width:100%; height:100%; }
  2. #box { width:100%; height:100%; background:rgba(0,0,0,0.7); display:flex; justify-content:center; align-items:center; }
  3. #content {width:50%; height:50%; background:pink; }

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

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

　

  1. <body>
  2.     <div id="box">
  3.         <div id="content"></div>
  4.     </div>
  5. </body>
  1. body,html { margin:; width:100%; height:100%; }
  2. #box { width:100%; height:100%;background:rgba(0,0,0,0.7); position:relative;}
  3. #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. sqlserver with（nolock）而mysql 不需nolock

    nolock 是 SQL Server 特有的功能. 例如:对于一个表 A,更新了一行,还没有commit,这时再select * from A 就会死锁.用select * from A(noloc ...

  2. Java计算两个时间的天数差与月数差 LocalDateTime

    /**  * 计算两个时间点的天数差  * @param dt1 第一个时间点  * @param dt2 第二个时间点  * @return int,即要计算的天数差  */ public stat ...

  3. Comet OJ - Contest #13

    Rank53. 第一次打这种比赛.还是有不少问题的,以后改吧. A题WA了两次罚了不少时. C写到一半发现只能过1,就先弃了. D一眼没看出来.第二眼看出来就是一个类似于复数的快速幂. 然后B切了. ...

  4. php 图像处理 抠图,生成背景透明png 图片

    *自定义一个图片等比缩放函数 *@param string $picname 被缩放图片名 *@param string $path 被缩放图片路径 *@param int $maxWidth 图片被 ...

  5. 根据ip获取地理信息.php

    根据ip获取地理信息.php <?php function getIPLoc_sina($queryIP){ $url = 'http://int.dpool.sina.com.cn/iploo ...

  6. 编辑器IDE之VSCode

    很多时候面临换项目组,公司内部换等等,需要清除之前的权限,电脑更换等... 确实很烦人,所以记录也是给自己下次更加快速方便的使用 插件安装 个人常用的一些插件,发现好用的会更新 插件名 功能 vsco ...

  7. inline void 树状数组神奇感悟【雾

    才发现扫描线可以用树状数组搞... 致远星患者 (另外根据这篇博文的内容怎么越来越感觉自己往 PJ 入门靠拢了...) 还有一点,咱把树状数组当做线段树来康的话其实一切都会很清晰,这个来张四合一的图: ...

  8. （转）终于有人把Elasticsearch原理讲透了！

    终于有人把Elasticsearch原理讲透了! 小史是一个非科班的程序员,虽然学的是电子专业,但是通过自己的努力成功通过了面试,现在要开始迎接新生活了. 来源:互联网侦察 | 2019-04-08 ...

  9. wpf prism加载独立模块实例

    一.首先看看文件的组织架构 module1 module2生成dll某块.Shell来显示管理模块 二,看看关键bootstrapper类 using System;using System.Coll ...

  10. lamp项目上线流程简述 (ubuntu16.04 )

    1  新建一个sudo用户,而不是直接用root操作 ①  新建用户可参考 https://www.cnblogs.com/bushuwei/p/10880182.html ②  赋予sudo权限: ...