css实现元素垂直水平居中-包括未知宽高的元素
这个一道很经典的面试题,做项目中也常会出现这样的需求。 现在我就用几种比较常用的方法。兼容性也列出来。
第一种已知宽高(定位加负边距解决)兼容到IE6
position: absolute;z-index: 8;left: 50%;top: 50%;width: 200px;height: 200px;margin-left: -100px;margin-top: -100px;background: red;复制代码
demo地址 JSBin
第二种未知宽高 (定位加margin解决) 兼容到IE8 移动端推荐使用
position: absolute;z-index: 8;left: 0;top: 0;bottom: 0;right: 0;width: 200px;height: 200px;margin: auto;background: red;复制代码
如果改变宽度和高度还是垂直水平居中的。 demo地址 JSBin
第三种未知宽高 (定位加transform解决) 兼容到IE9 移动端推荐使用
position: absolute;z-index: 8;left: 50%;top: 50%;width: 200px;height: 200px;transform: translate(-50%, -50%);background: red;复制代码
如果改变宽度和高度还是垂直水平居中的。 demo地址 JSBin
第四种未知宽高 (弹性盒子模型解决) 兼容到IE10
display: flex;display: -webkit-flex;align-items:center;justify-content: center;复制代码
如果改变宽度和高度还是垂直水平居中的。 demo地址 JSBin
第五种未知宽高 (table特性解决的) 兼容到IE6 PC端推荐使用
#box{width: 100px;height:100px;text-align:center;font-size:0;background: red}#box:after,#box span{display:inline-block;*display:inline;*zoom:1;width:0;height:100%;vertical-align:middle;}#box:after{content:'';}#box p{display:inline-block;*display:inline;*zoom:1;vertical-align:middle;font-size:16px;}复制代码
demo地址 JSBin
我的博客和GitHub地址喜欢的话送个star谢谢。
/lanpangzhi
参考
/css/alignme…