一共有三个方案：
1，第一种方案主要使用了css3中transform进行元素偏移，效果非常好
这方法功能很强大，也比较灵活，不仅仅局限在实现居中显示。 兼容方面也一样拿IE来做比较，第二种方法IE8以上都能使用。 IE8及IE8以下都会出现问题。
<body> <div id="box"> <div id="content">div被其中的内容撑起宽高</div> </div> </body>
body,html { margin:0; 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:0; 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:0; 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:0; right:0; bottom:0; left:0; margin:auto; }
原理不是很明白，但是这种方式并不完善，content只能设置固定宽高，无甚意义。