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。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » CSS如何实现不定宽高div水平垂直居中呢?
码云笔记 » CSS如何实现不定宽高div水平垂直居中呢?