居中详解 - 码农教程

讲解

1，单行文本的居中：

          <div class='center'><span>单行文本框居中</span></div>
          .center{width:300px;height:300px;line-height:300px;}

2, 多行文本的居中：

1）

     <div class='c1'><span class='c2'>多行文本框居中。。。。。。。</span></div>
          .c1{width:300px;height:300px; display:table-cell;vertical-align:middle;border:3px solid red;}
          .c2{vertical-alignn:middle;display:inline-block;}

注意，包含框div不能浮动;对多行文本采用图像的处理方式（inline-block）。

2）

        <div style="border: 1px dashed darkcyan;line-height:150px;">
        <span style="display: inline-block;vertical-align: middle;line-height: 1.4;">这是一个测试</br>
             为了测试文本居中</span><i style="width:0;vertical-align: middle;display: inline-block;">&nbsp;</i>
          </div>

3, 不定大小图片的居中：

可以采用background-img来进行控制，使用一个pixel.gif放在浮动层，并将浮动层覆盖至包含框大小，最后对<img>进行设置背景。

 <ul>
          <li><img src='img/pixel.gif' style='background-image:url(img/mm1.jpg);'/></li>
          <li><img src='img/pixel.gif' style='background-image:url(img/mm2.jpg);'/></li>
          <li><img src='img/pixel.gif' style='background-image:url(img/mm3.jpg);'/></li>
     </ul>
     ul{list-style:none;}
     li{width:128px;height:128px;border:1px solid #beceeb;float:left;margin-right:10px;}
     li img{display:block;width:100%;height:100%;background-repeat:no-repeat;background-position:center;}

4, 不定大小图片居中2：

使用display：table-cell实现。对于ie6，7的兼容性问题，可以使用css hack。ie67默认内部实现了一个抽象的文字空间，可以通过设置font-size来改变文字空间的大小。将font-size设置得很大，目的是撑开IE下默认文字空间的高度，其性质类似于空格，然后通过vertical-align:middle属性让图片与这个高高的空白空格空间垂直居中对齐；但是不支持img外标签的浮动，所以需要在img外添加一层div。

 <ul>
           <li class='c1'><img class='c2' src='img/mm1.jpg' /></li>
          <li class='c1'><img class='c2' src='img/mm1.jpg' /></li>
          <li class='c1'><img class='c2' src='img/mm1.jpg' /></li>
          </ul>
          li{margin-right:10px;border:1px solid red;}
          .c1{width:128px;height:128px;display:table-cell;vertical-align:middle;text-align:center;font-size:128*0.873px;}
          .c2{vertical-align:middle;}

5, 不定大小图片居中3：

使用一个1像素的图片或者使用span使其高度100%，宽度为0，使其撑满包含块，让其垂直居中，然后对要居中的图片进行垂直居中即可。

原理简述：

一句话，将要显示的图片与一张透明的高度100%，宽度1像素的透明图片vertical-align:middle对齐。在行内格式化上下午中，行框的高度应包含该行内所有行内框的高度，所以我们可以通过一个额外的行内块元素（可以设置高度，而且属于行框范围内）来将行框的高度撑满，然后对需要居中对齐的图片设置vertical-align属性来将元素居中对其。缺点是添加了额外的标签，好处是兼容性好。

               <li style="float: left;border: 1px solid #b3d4fc;width:140px;height:128px;font-size: 0px;text-align: center;">
                     <img style="height:100%;width:0px;vertical-align: middle;" src="img/pixel.gif">
                     <img style="vertical-align: middle;" src="img/mm1.jpg"/>
                 </li>

6,一个元素在包含块中的水平垂直居中对齐：

{
     position: absolute;
     top: 0%;
     right: 0%;
     bottom: 0%;
     left: 0%;
     margin: auto;
}

　　原理可参考绝对定位下的盒模型

最后，在此推荐一篇总结的比较全面的文章，尤其是其提到的最后一种利用flex布局的align-items属性进行垂直布局，可以进行扩展。