垂直居中

1  让一些<div>显示成table-cell ，结合vertical-align属性 ，vertical-align作用在一些元素上会表现得可能会匪夷所思

<div id="cell">  
        <div class="content">Content goes here</div>  
</div>  

#cell {  
    display: table-cell;  
    vertical-align: middle;  
}

 

2 这个方法会用到一个top设为50%、margin-top设为内容高度的一半、绝对定位的div。这意味着它必须有一个固定的高度，这是在CSS里定义的。因为它的高度固定，你可能想要给它设置overflow:auto;，这样如果内容太多的话就不会溢出而是会出现滚动条了。

<div id="content">Content goes here</div>  

#content {  
    position: absolute;  
    top: 50%;  
    height: 240px;  
    margin-top: -120px; /* negative half of the height */  
}

 

3 在这个方法中，我们会在内容元素上方插入一个div，这个div会被设置成height:50%;margin-bottom:-contentheight/2，然后内容元素会因为清理浮动而居中了。

使用一个浮动元素然后清理浮动，因为内容元素设置了clear:both;，所以你还可以在它上面放其他元素，即使浏览器缩小居中的内容元素也不会盖住它们

<div id="floater"></div>  
<div id="content">Content here</div>  
#floater {  
    float: left;  
    height: 50%;  
    margin-bottom: -120px;  
}  
  

#content {  
    clear: both;  
    height: 240px;  
    position: relative;  
}

 

4 这个方式使用一个绝对定位且固定宽高的div，接着这个div被要求拉伸到top:0;bottom:0;，它因为高度被固定而做不到这一点，所以margin:auto;就让它居中了。这个方法类似于常见的使用margin:0 auto;来让块状元素水平居中。

<div id="content">Content here</div> 

#content {  
    position: absolute;  
    top: 0;  
    bottom: 0;  
    left: 0;  
    right: 0;  
    margin: auto;  
    height: 240px;  
    width: 70%;  
}

 

5 这个方法只会居中一行文字。只需要设置line-height等于目标对象的高度，然后文字就居中了。  只能用在文本上（不能用在块状元素上）

<div id="content">Content here</div>  

#content {  
    height: 100px;  
    line-height: 100px;  
}

 讲解 ：

     如果内容区域是最外层的窗口，在内容垂直居中之前，body和html必须被拉伸到100%的高度。因为padding和margin是不计入高度的，所以我们要把它们设置为零，这样就不会因为margin出现滚动条了。 
 

以上5种方法的，实例

<html>
<head>
    <style>
        /* 方法1
          .father-div{
               width:500px;
               height:500px;
               margin:auto;
               margin-top:100px;
               background:red;
               display: table-cell;  
               vertical-align: middle;
               font-size:24px;
           }

          .son-div{
              width:200px;
              height:200px;
              background:yellow;
          } */

        /* 方法3 
         #floater {
            float: left;
            height: 50%;
            margin-bottom: -120px;
            background:red;
        }

        #content {
            clear: both;
            height: 240px;
            position: relative;
            background:yellow;
            z-index:1;
        } */


        /* 方法4
         #content {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            height: 240px;
            width: 70%;
            background:red;
        } */

        /* 方法5 */
        #content {
            height: 100px;
            background:yellow;
            color:red;
            line-height: 100px;
        }
    </style>
</head>

<body>
     <!-- 方法1 
       <div class="father-div">
            <div class="son-div">
            </div>
        </div>
     -->

    <!-- 方法3 
       <div id="floater"></div>
       <div id="content">Content here</div> 
    -->

    <!-- 方法4 
       <div id="content">Content here</div> 
    -->

    <!-- 方法5 -->
    <div id="content">Content here</div>

</body>
</html>

 

posted on 2021-01-27 10:24  zhishiyv  阅读(56)  评论(0)  编辑  收藏  举报

导航