码迷,mamicode.com
首页 > Web开发 > 详细

css 垂直居中的几种方法

时间:2017-11-09 21:04:05      阅读:182      评论:0      收藏:0      [点我收藏+]

标签:垂直居中   维度   属性   定位   out   ie7   tab   outline   target   

1.图片水平垂直居中

html:
     <div class="parent">
        <div class="child">
           <img src="xxx/demo.png">
        </div>
      </div>
css:
     .parent{
        display: table
     }
     .parent .child {
        display: table-cell;
        *display: inline-block;
        text-align: center;
        vertical-align: middle;
     }
     .parent .child img{
        border: none;
        width: 200px;
        height: 200px;
        vertical-align: middle;
     }

注: IE修复: *display: inline-block; 由于vertical-align属性与表格一起使用,我们将父DIV设置为display: table, 并将子DIV设置为单元格display: talbe-cell.然后我 们可以安全的使用vertical-align:middle 来垂直单元格中的内容.此方法适用于多行文本,容器DIV随内容动态增长,不幸的是不工作于IE6、IE7中。

2. 绝对定位和垂直拉伸

html:
     <div class="parent">
        <div class="child">content here</div>
     </div>
  css:
      .parent {
         position: relative;
      }
      .parent  .child {
         position: absolute;
         top: 0;
         right: 0;
         bottom: 0;
         left: 0;
         margin: auto;
         width: 50%;
         height: 50%;
      }

注: 子DIV处于父DIV中,它的顶部,底部,左侧,右侧的值都设为0。因为子DIV的高度和宽度都设置为小于父DIV的高度和宽度,所以这种定位是不行的。将子DIV的4个边框都设置为auto会在顶部和底部以及左右两侧产生同等的边距,这导致子DIV同时水平和垂直居中,不幸的是IE7以下不支持。

3.填充

html:
    <div class="parent">
        <div class="child">content here</div>
    </div>
css:
    .parent {
       padding: 5% 0;
    }
    .parent .child {
       padding: 10% 0;
    }

注: 相同顶部和底部填充用于使子DIV在父DIV居中,并使子DIV中的文本居中。padding设置为"%",允许两个DIV动态增长。 如果任何元素的高度都设置绝对测量,则需要一些数学知识来确保顶部和底部填充相同。虽然这个方法是在容器上设置paddings,你可以翻转事物,并在包含的元素中设置边距。

4.lineHeight

html:
   <div class="parent">
     <div class="child">content here</div>
   </div>
css:
   .child {
        line-height: 200px;
    }

注: 垂直居中通过给子div(包含文本的那个)一个大于字体大小的行高来实现。有些也设置一个高度等于这个div上的行高,但我还没有发现它的必要。这将工作于垂直居中一行文本,但不会工作在多行文本。

5.定位和负边距

 

html:
    <div class="parent">
        <div class="child"></div>
    </div>
css:
   .parent{ 
       position: relative
    }
    .parent .child { 
      position: absolute;
      top: 50%;
      left: 50%;
      width: 200px;
      height: 200px;
      margin: -100px 0 0 -100px;
     }

注: 子DIV通过定位和边距定位在父DIV中心,通过将子DIV的顶部和左侧的值设为50%,子DIV的左上角位于父DIV的中心。负顶部和左侧等于元素高度和宽度的一半,向上拉伸子DIV让它处于父DIV中心。此方法最适合于块级元素,并且它需要知道子DIV的维度。

6.浮动分区

html:
   <div class="parent">
       <div class="floater"></div>;
        <div class="child">content here</div>
     </div>
css:
   .parent{
         height: 200px;
      }
      .parent .floater {
         float: left;
         height: 50%;
         width: 100%;
         margin-bootm: -50px;
         border: 1px solid red;
      }
      .parent .child {
        clear: both;
        height: 100px;
        outline: 1px solid yellow;
      }

注: 这里,一个空的div设置为父div的一半高度并向左(或右)浮动。我们想要居中的div然后被清除,所以它的顶边将直接位于浮动div的底边下方。为了使子div的垂直中心向上,我们为浮动div添加一个负的下边距,它等于子div的一半高度。

转载自:http://frontenddev.org/article/introduction-to-vertical-in-the-css-in-several-ways.html

css 垂直居中的几种方法

标签:垂直居中   维度   属性   定位   out   ie7   tab   outline   target   

原文地址:http://www.cnblogs.com/LiberBlog/p/7811169.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!