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谢谢。

github.com/lanpangzhi

blog.langpz.com

参考

demo.doyoe.com/css/alignme…

css面试题实现元素垂直水平居中-包括未知宽高的元素五种回答相关推荐

关于css设置元素垂直水平居中的问题
第一种: 利用定位属性实现,但需要知道元素的宽高 <div class="box"></div><style>.box{weight:200px ...
css（css3）实现垂直水平居中的那些事
都说"金三银四求职季",本人也选择了在这个时候成为这浩浩荡荡的求职大军中的一员,几次面试下来,发现面试官都爱问的一个问题就是:"说说垂直水平居中都有哪些实现方式吧?&qu ...
[css] 写出在不固定宽高的元素在固定高度的情况下水平垂直居中的方法
[css] 写出在不固定宽高的元素在固定高度的情况下水平垂直居中的方法 flex布局:还有就是可以用定位也可以实现等等: flex:父div:{display:flex: justify-conten ...
已知/未知宽高的浮动元素水平居中对齐和图片水平垂直居中对齐
一.已知宽高的浮动元素水平垂直居中对齐效果: 样式CSS: 1 <style> 2 .parent{ 3 position:relative; 4 border:2px solid #0 ...
CSS未知宽高元素水平垂直居中
方法一 :table.cell-table 思路:显示设置父元素为:table,子元素为:cell-table,这样就可以使用vertical-align: center,实现水平居中优点:父元素( ...
CSS Transform让百分比宽高布局元素水平垂直居中
CSS Transform让百分比宽高布局元素水平垂直居中很早以前了解过当元素是固定宽度和高度的时候,水平垂直高居中的方法可以设置margin的负值来使其居中,这个负值是元素的宽和高的一半,比如宽高 ...
jl1.如何设置元素的宽高包含元素的边框和内边距
jl1.如何设置元素的宽高包含元素的边框和内边距方法一: 文档地址:http://www.w3school.com.cn/cssref/pr_box-sizing.asp CSS3 box-sizi ...
html body不定宽居中,纯CSS实现元素垂直水平居中-非固定宽度
这里不讨论行内元素的居中!! 盒子垂直居中+水平居中的需求时经常遇到的,看到的较多实现逻辑是固定content-box的宽度,通过让margin-left和margin-top等于宽或高的负一半来实现 ...
html元素垂直水平居中显示,关于css:html-元素垂直水平居中
一. 不定宽高元素程度垂直居中 1.transform: translate() 程度垂直居中 .wrapper{ background-color: #eee; height:200px; } .c ...

css面试题实现元素垂直水平居中-包括未知宽高的元素五种回答

css实现元素垂直水平居中-包括未知宽高的元素

第一种已知宽高（定位加负边距解决）兼容到IE6

第二种未知宽高 (定位加margin解决) 兼容到IE8 移动端推荐使用

第三种未知宽高 (定位加transform解决) 兼容到IE9 移动端推荐使用

第四种未知宽高 (弹性盒子模型解决) 兼容到IE10

第五种未知宽高 (table特性解决的) 兼容到IE6 PC端推荐使用

我的博客和GitHub地址喜欢的话送个star谢谢。

参考

css面试题实现元素垂直水平居中-包括未知宽高的元素五种回答相关推荐

最新文章

热门文章