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

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 }

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 }

   <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 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 }