css 实现元素水平垂直居中总结5中方法
个人总结，如有错误请指出，有好的建议请留言。o(^▽^)o
一、margin:0 auto；text-align:center；line-height方法
1 <div id="divAuto">margin,text-align;水平居中</div>
1 /* 2 margin:0 auto; 设置块元素（或与之类似的元素）的水平居中 3 text-align:center;设置文本或img标签等一些内联对象（或与之类似的元素）的水平居中 4 line-height:;高度设置为容器的高度 实现单行文本垂直居中(伪居中) 5 overflow:hidden;为了防止内容超出容器或者产生自动换行 6 */ 7 #divAuto { 8 width:300px; 9 height:50px; 10 background-color:#ff6a00; 11 margin:0 auto; 12 text-align:center; 13 line-height:50px; 14 overflow:hidden; 15 }
二、div不设置高度，子元素padding填充
1 <div id="divPar"> 2 <p>padding填充实现居中</p> 3 </div>
1 /* 2 div 不设置高度 3 padding:20px 0;使用padding值把div填充起来，是一种“看起来”的垂直居中方式， 4 这种方法应用的前提就是容器的高度必须是可伸缩的 5 */ 6 #divPar { 7 width:100px; 8 background-color:#00ff21; 9 } 10 #divPar p{ 11 padding:20px 0; 12 }
三、display:table；display:table-cell; 元素表格化实现垂直居中
<div id="divBox"> <div id="divChild">table化，vertical-align:middle；实现垂直居中</div> </div>
1 /* 2 使用table的方式实现元素垂直居中 3 父div的display设置为table 4 子div的display设置为table-cell 5 通过vertical-align:middle;实现元素垂直居中 6 缺点：IE8无效 7 */ 8 #divBox { 9 width:200px; 10 height:100px; 11 margin:10px auto; 12 background-color:#000000; 13 display:table; 14 text-align:center; 15 } 16 #divChild { 17 width:50px; 18 height:50px; 19 background-color:#ff6a00; 20 display:table-cell; 21 vertical-align:middle; 22 }
四、利用父元素相对定于，子元素绝对定位的方式实现
<div id="divRel"> <div id="divAbs">绝对定位</div> </div>
1 /* 2 利用父元素相对定位 子元素绝对定位的方式实现子元素水平垂直居中 3 top:50%;left:50% 实现子元素左上角处在父元素的中心位置 4 margin设置宽高位负的子元素宽高的一半 实现子元素相对父元素水平垂直居中 5 缺点：没有足够空间时，content 会消失(类似div 在 body 内，当用户缩小浏览器窗口，滚动条不出现的情况) 6 */ 7 #divRel { 8 width:500px; 9 height:200px; 10 position:relative; 11 background-color:#ffd800; 12 } 13 #divAbs { 14 width:100px; 15 height:50px; 16 position:absolute; 17 background-color:#4800ff; 18 text-align:center; 19 top:50%; 20 left:50%; 21 margin:-25px 0 0 -50px; 22 }
1 /*绝对居中 子元素的另一种实现方式*/ 2 #divAbs { 3 width:100px; 4 height:50px; 5 position:absolute; 6 background-color:#4800ff; 7 text-align:center; 8 left:0;/*-- left和right配对出现控制水平方向 --*/ 9 right:0; 10 top:0;/*-- top和bottom配对出现控制垂直方向居中 --*/ 11 bottom:0; 12 margin:auto;/* 这句是必须的*/ 13 14 }
五、使用一个div当填充元素实现子元素的垂直居中
<div id="parent"> <div id="zero">填充元素</div> <div id="child">Content here</div> </div>
1 /*这种方法，在 content 元素外插入一个 div。设置此 div height:50%; margin-bottom:-contentheight;content 清除浮动，并显示在中间; 2 缺点：需要额外的空元素*/ 3 4 #parent {width:800px; 5 height:300px; 6 border:1px solid #ccc;} 7 8 #zero { 9 float:left; 10 height:50%; 11 margin-bottom:-100px;/*居中元素高度的一半*/ 12 } 13 #child { 14 clear:left;/*清除浮动*/ 15 height:200px; 16 background-color:#ff0000; 17 }
经验所限，暂时更新到这里...
