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水平垂直居中呢？的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。