css实现不定宽高的div水平、垂直居中

烈酒焚心 提交于 2020-01-15 08:45:17

一共有三个方案:

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只能设置固定宽高,无甚意义。

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!