CSS如何实现不定宽高div水平垂直居中呢?

答疑时间

CSS如何实现不定宽高div水平垂直居中呢?对于老鸟当然不在话下,但是对于新入行的小伙伴可以提供一个很好的参考,虽然很基础,但是万丈高楼平地起,打不好基础怎么行!

CSS实现不定宽高div水平垂直居中这里总结了三个方案:

我先把公共的HTML代码附上

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

方案一:transform方法

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

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

CSS代码:

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%); }

方案二:flex布局

很简单的几句代码就可以实现

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; }

方案三:兼容性最好的方案

不能算严格意义上的不定宽高,子div不能根据内容大小做改变:

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

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

结语

以上就是今天码云笔记为大家带来的CSS如何实现不定宽高div水平垂直居中呢?更多前端开发知识请关注码云笔记mybj。

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » CSS如何实现不定宽高div水平垂直居中呢?

发表评论