css 实现元素水平垂直居中总结5中方法

个人总结，如有错误请指出，有好的建议请留言。o(^▽^)o

一、margin:0 auto；text-align:center；line-height方法　　

 <div id="divAuto">margin,text-align;水平居中</div>

 /*
     margin:0 auto; 设置块元素（或与之类似的元素）的水平居中
     text-align:center;设置文本或img标签等一些内联对象（或与之类似的元素）的水平居中
     line-height:;高度设置为容器的高度 实现单行文本垂直居中(伪居中)
     overflow:hidden;为了防止内容超出容器或者产生自动换行
 */
 #divAuto {
     width:300px;
     height:50px;
     background-color:#ff6a00;
     margin:0 auto;
    text-align:center;
    line-height:50px;
    overflow:hidden;
 }

二、div不设置高度，子元素padding填充

     <div id="divPar">
         <p>padding填充实现居中</p>
     </div>

 /*
     div 不设置高度
     padding:20px 0;使用padding值把div填充起来，是一种“看起来”的垂直居中方式，
     这种方法应用的前提就是容器的高度必须是可伸缩的
 */
 #divPar {
     width:100px;
     background-color:#00ff21;
 }
 #divPar p{
     padding:20px 0;
 }

三、display:table；display:table-cell; 元素表格化实现垂直居中

   <div id="divBox">
        <div id="divChild">table化，vertical-align:middle；实现垂直居中</div>
    </div>

 /*
     使用table的方式实现元素垂直居中
     父div的display设置为table
     子div的display设置为table-cell
     通过vertical-align:middle;实现元素垂直居中
     缺点：IE8无效
 */
 #divBox {
     width:200px;
     height:100px;
     margin:10px auto;
     background-color:#000000;
     display:table;
     text-align:center;
 }
 #divChild {
     width:50px;
     height:50px;
     background-color:#ff6a00;
     display:table-cell;
     vertical-align:middle;
 }

 四、利用父元素相对定于，子元素绝对定位的方式实现

    <div id="divRel">
        <div id="divAbs">绝对定位</div>
    </div>

 /*
     利用父元素相对定位 子元素绝对定位的方式实现子元素水平垂直居中
     top:50%;left:50% 实现子元素左上角处在父元素的中心位置
     margin设置宽高位负的子元素宽高的一半 实现子元素相对父元素水平垂直居中
     缺点：没有足够空间时，content 会消失(类似div 在 body 内，当用户缩小浏览器窗口，滚动条不出现的情况)
 */
 #divRel {
     width:500px;
     height:200px;
     position:relative;
     background-color:#ffd800;
 }
 #divAbs {
     width:100px;
     height:50px;
     position:absolute;
     background-color:#4800ff;
     text-align:center;
     top:50%;
     left:50%;
     margin:-25px 0 0 -50px;
 }

 /*绝对居中 子元素的另一种实现方式*/
 #divAbs {
     width:100px;
     height:50px;
     position:absolute;
     background-color:#4800ff;
     text-align:center;
     left:;/*-- left和right配对出现控制水平方向 --*/
     right:;
     top:;/*-- top和bottom配对出现控制垂直方向居中 --*/
     bottom:;
     margin:auto;/* 这句是必须的*/

 }

 

五、使用一个div当填充元素实现子元素的垂直居中

    <div id="parent">
        <div id="zero">填充元素</div>
        <div id="child">Content here</div>
    </div>

 /*这种方法，在 content 元素外插入一个 div。设置此 div height:50%; margin-bottom:-contentheight;content 清除浮动，并显示在中间;
 缺点：需要额外的空元素*/

 #parent {width:800px;
     height:300px;
     border:1px solid #ccc;}

 #zero {
     float:left;
     height:50%;
     margin-bottom:-100px;/*居中元素高度的一半*/
 }
 #child  {
     clear:left;/*清除浮动*/
     height:200px;
     background-color:#ff0000;
 }

经验所限，暂时更新到这里...