css实现不定宽高的div水平、垂直居中
一共有三个方案: 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"