您所在的位置:小祥子 » 编程 » CSS » 正文

CSS:水平居中与垂直居中

时间:2015-04-23 编辑:JuFoFu 来源:本站整理
CSS居中算是一个比较基础的问题,在实际运用中,需要考虑到的一般是两种情况,一种是主要是表现为文字,图片等行内元素的居中,一种是指 div 等块级标签元素的居中。

水平居中

1、行内元素 行内元素(主要是表现为文字,图片等行内元素),通过在父级元素设置 text-align:center 使子级行内元素居中。   2、定宽块级元素 为定宽块级元素设置:
 margin-left:auto;
 margin-right:auto;
  3、不定宽块级元素  不定宽块级元素居中有三种方法:
  1. 加入 table 标签
  2. 设置 display:inline 方法
  3. 设置 position:relative 和 left:50%
方法一: 将元素用 table 标签包裹起来,包括 tbody、tr、td,但这种方法为了居中增加了无语义的标签。   ---------------------------------------------------------举个栗子--------------------------------------------------------- HTML:
 <div>
   <table>
     <tbody>
       <tr>
         <td>
            <ul>
               <li><a href="#">我是要</a></li>
               <li><a href="#">居中的</a></li>
               <li><a href="#">ul标签</a></li>
            </ul>
         </td>
       </tr>
     </tbody>
   </table>
 </div>
CSS:
 table{
     margin:0 auto;
 }
 ul{list-style:none;margin:0;padding:0;}
 li{float:left;margin-right:8px;}
现代浏览器表现正常: IE7有时候会出现问题: ---------------------------------------------------------吃完栗子---------------------------------------------------------   方法二: 设置为 inline 行内元素后沿用行内元素居中的方法,这种方法改变了元素的 display 样式。   ---------------------------------------------------------举个栗子--------------------------------------------------------- HTML:
 <div>
     <ul>
        <li><a href="#">我是要</a></li>
        <li><a href="#">居中的</a></li>
        <li><a href="#">ul标签</a></li>
   </ul>
 </div>
CSS:
 div{
   text-align:center;
 }
 ul{list-style:none;margin:0;padding:0;display:inline;}
 li{margin-right:8px;display:inline;}
各浏览器表现正常居中,IE7也没有出现什么问题。 ---------------------------------------------------------吃完栗子---------------------------------------------------------   方法三: 通过给父元素设置 float/display:inline-block(IE7对块级元素设置 inline-block 支持性不好,需要 hack,即 *display:inline;*zoom:1;),然后给父元素设置 position:relative 和 left:50%,子元素设置 position:relative 和 left:-50% 来实现水平居中。   ---------------------------------------------------------举个栗子--------------------------------------------------------- HTML:
 <div>
     <ul>
        <li><a href="#">我是要</a></li>
        <li><a href="#">居中的</a></li>
        <li><a href="#">ul标签</a></li>
     </ul>
 </div>
CSS:
 div{
     display: inline-block;
     /*兼容IE6,IE7*/
     *display: inline;
     *zoom:1;
     position:relative;
     left:50%
 }
 ul{
     /*兼容IE6*/
     _display: inline;
     _zoom:1;
     list-style:none;
     margin:0;
     padding:0; 
     position:relative;
     left:-50%;
 }
 li{
     float:left;
     margin-right:8px;
 }
chrome,Firefox,opera,IE6+都可以表现正常。 注: 1、_display:inline 其实是触发IE6中块级元素表现出 inline-block 的效果,_zoom:1 触发IE6中 hasLayout 效果,这里其他浏览器不需要触发 inline-block 效果,原因不是很清楚; 2、其中display:inline-block 也可以替换为 float ,float的主要作用就是产生 inline-block 的效果,这样代码会更加简洁一些,不用考虑太多的兼容问题: CSS:
 div{
     float: left;
     position:relative;
     left:50%
 }
 ul{
     /*兼容IE6*/
     _float:left;
     list-style:none;
     margin:0;
     padding:0; 
     position:relative;
     left:-50%;
 }
 li{
     float:left;
     margin-right:8px;
 }
---------------------------------------------------------吃完栗子--------------------------------------------------------- 垂直居中 垂直居中主要是行内元素的居中比较麻烦,特别是多行文本的居中。 1、父元素高度确定的行内元素(单行文本), 通过设置父元素的 height 和 line-height 高度一致来实现的。   2、高度固定的块级元素垂直居中 高度固定的块级元素垂直居中有三种方法:
  1. 垂直居中元素设置 absolute,利用 absolute 元素居中的方法来居中;
  2. 垂直居中元素设置 absolute,通过 top 和 margin-top 属性来调整;
  3. 创建浮动元素;
方法一: 其实这个方法是 absolute 元素居中的方法,父元素设置 position:relative,垂直居中元素设置 position:absolute,当要垂直居中时,设置 top:0;bottom:0,然后为上下 margin 设置 auto,水平居中也是同理。IE6,IE7不支持此种居中方法。 这种方法适用于原本就设置了 position 为 absolute 的元素。   ---------------------------------------------------------举个栗子--------------------------------------------------------- HTML:
 <div class="wrap">
   <div class="container">
      <p>我是想要垂直居中的块级元素。</p>
   </div>
 </div>
CSS:
 .wrap{
     width:200px;
     height: 200px;
     background:#ccc;
     position: relative;
 }
 .container{
     width: 100px;
     height:100px;
     background: #00ff00;
     position:absolute; 
     right: 0;
     left:0;
     top:0; 
     bottom:0; 
     margin:auto; 
 }
chrome,Firefox,opera,IE8+表现如下,水平垂直居中: ---------------------------------------------------------吃完栗子---------------------------------------------------------   方法二: 父元素设置 position:relative,需要垂直居中的元素设置:
 position:absolute;
 top:50%;
 height:2Hpx;
 margin-top:Hpx;
这里 top改为 bottom,margin-top 改为 margin-bottom 效果一样,这种方法适用于原本设置了 position 为 absolute 的元素。   ---------------------------------------------------------举个栗子--------------------------------------------------------- HTML:
 <div class="wrap">
   <div class="container">
      <p>我是想要垂直居中的块级元素。</p>
   </div>
 </div>
CSS:
 .wrap{
   width:100px;
   height: 200px;
   background:#ccc;
   position: relative;
 }
 .container{
     position:absolute; 
     top:50%; 
     height:100px; 
     margin-top:-50px; /* 高度的一半 */ 
     background: #00ff00;
 }
chrome,Firefox,opera,IE6+都能够居中: IE6 由于 3px bug表现稍微不同,不过由于这里主要讨论垂直居中,所以就不对其作过多留意。 ---------------------------------------------------------吃完栗子---------------------------------------------------------     方法三: 在需要垂直居中的元素前创建浮动元素,浮动元素设置 margin-bottom 为垂直居中元素高度的一半,高度为父元素高度的一半,为了兼容IE6、IE7,还需要象征性地设置一下 width。垂直居中元素 清除浮动。但是这个方法创建了无语义的标签,还要做一些兼容性的处理。   ---------------------------------------------------------举个栗子--------------------------------------------------------- HTML:
 <div class="wrap">
     <div class="floatdiv"></div>  
     <div class="container">
         <p>我是想要垂直居中的块级元素。</p>
     </div>
 </div>
CSS:
 .wrap{
     width: 100px;
     height: 200px;
     background: #ccc;
 }
 .floatdiv {
     *width: 1px;/*兼容IE6、IE7*/
     float:left; 
     height:50%; 
     margin-bottom:-50px;
 }
 .container {
     clear:both; 
     height:100px; 
     position:relative;
     background: #00ff00;
 }
chrome,Firefox,opera,IE6+都能够居中: ---------------------------------------------------------吃完栗子---------------------------------------------------------   3、父元素高度确定的行内元素多行文本、图片)、块状元素 父元素高度确定的行内元素多行文本、图片)、块状元素垂直居中有两种方法
  1. 加入table标签;
  2. 设置 display 为 table-cell,激活 vertical-align 属性。
  方法一: 使用插入 table (包括tbody、tr、td)标签,同时设置 vertical-align:middle。   ---------------------------------------------------------举个栗子--------------------------------------------------------- HTML:
 <table>
   <tbody>
     <tr>
       <td class="wrap">
         <div>
           <p>我是想要垂直居中的一段文字。</p>
         </div>
       </td>
     </tr>
   </tbody>
 </table>
CSS:
 .wrap{
    width:100px;
    height:200px;
    background:#ccc
 }
chrome,Firefox,opera,IE6+表现如下: 注: 1、因为 td 标签默认情况下就默认设置了 vertical-align 为 middle,所以我们不需要显式地设置了; 2、将 div 换为 img 效果一致。 ---------------------------------------------------------吃完栗子---------------------------------------------------------   方法二: 在 chrome、Firefox 、opera、IE8 及以上的浏览器下可以设置块级元素的 display 为 table-cell,激活 vertical-align 属性,但注意 IE6、7 并不支持这个样式。   ---------------------------------------------------------举个栗子--------------------------------------------------------- HTML:
 <div>
   <p>我是想要垂直居中的一段文字。</p>
 </div>
CSS:
 div{
   width:100px;
   height:200px;
   background:#ccc;
   display:table-cell;
   vertical-align:middle;
 }
chrome、Firefox 、opera、IE8 及以上的浏览器表现正常,IE6 和 IE7 则无法居中。 ---------------------------------------------------------吃完栗子--------------------------------------------------------- 垂直居中的方法比较多,至于用哪种方法还是要具体看情况,而且我相信还有更多的方法,欢迎大家补充。    水平有限,错误欢迎指正。原创博文,转载请注明出处。
关键词:CSS 水平 居中 垂直