前端布局 盒模型中的居中

面试前端开发需要带作品 开发前端最好用的软件下载 web前端开发 美图面试
说到居中的问题,或许大多数童鞋都会想到text-align:center; margin:0 auto; vertical-align:middle; line-height:height; ……的确,这些属性在某种程序上可以达到居中的效果。但是否是适用于每一种情况呢?我们先来温习一下这些个属性值的用处。
text-align:center; 行内元素的水平居中显示;
margin:0 auto; 固宽盒子在浏览器中的居中显示效果;
vertical-align:middle; 行内元素的垂直居中显示;
line-height:height; 针对于单行文字垂直居中显示;
====================================
<div class=”A”>
<div class=”B”>测试</div>
</div>
第一种方法:(常用)
.A{ position: relative; height:500px; width:500px; background-color:#FF0000;}
.B{ position: absolute; top:50%; left:50%;height:250px; width:250px; background-color:#FFF; margin:-125px 0 0 -125px; }
第二种方法:
.A{ position: relative; height:500px; width:500px; background-color:#FF0000; overflow:hidden;}
.B{ position: relative; height:250px; width:250px; background-color:#FFF; margin:-125px auto 0; top:250px;}
第三种方法:(IE有点问题)
.A{ position: relative; height:500px; width:500px; background-color:#FF0000; }
.B{ position: absolute; height:250px; width:250px; background-color:#FFF; margin:auto; top:0; left:0; bottom:0; right:0;}
第四种方法:(用到CSS3,不考虑IE,只在火狐做了测试,其他可加前缀)
.A{position:relative; height:500px; width:500px; background-color:#FF0000;display:-moz-box; -moz-box-pack: center; -moz-box-align:center;}
.B{height:250px; width:250px; background-color:#FFF;}
第五种方法:(IE6/7兼容)
.A{ display:table-cell;height:500px;width:500px;background-color:#FF0000;vertical-align: middle;text-align: center;
font-size:438.6px;/font-size的值为该父元素的高度除以1.14得到的值,即500/1010=438.6/}
.B{ display:inline-block;height:250px; width:250px; background-color:#FFF;
display:inline; zoom:1;/ie6/7实现inline-block/
vertical-align: middle;
font-size:12px;/恢复正常字体大小/}
=====================================
宽度高度不固定的div垂直居中
<div class=”A”>
<div class=”B”><div class=”C”>测试</div></div>
</div>
.A { display:table; background-color:red; width:500px; height:200px; overflow:hidden; _position:relative; }
.B { vertical-align:middle; display:table-cell; text-align:center; _position:absolute; _top:50%; _left:50%; }
.C { color:#fff; display:inline-block; _position:relative; _top:-50%; _left:-50%; }
web前端开发 美图面试 前端开发面试和面试官交流 软件开发前端学习教材
» 本文来自:前端开发者 » 《前端布局 盒模型中的居中》
» 本文链接地址:https://www.rokub.com/5319.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!