美文网首页
水平垂直居中

水平垂直居中

作者: 从不放弃 | 来源:发表于2018-12-27 10:09 被阅读4次

    指定父级宽高 子级不定

    1、transform: translate(-50%, -50%)

    缺点:IE9以下不支持

    .set-fun {
      position: relative;
      height: 128px;
      width: 128px;
      text-align: center;
      background-color: white;
    }
    
    .set-fun .fun-content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    

    2、table table-cell

    缺点:IE8以下不支持

    #container_outer{
        display:table;
        overflow:hidden;
        width:600px;
        height:400px;
    }   
    #container_inner{
        vertical-align:middle;
        display:table-cell;
        text-align:center;
        border:1px solid #000;
    } 
    #content{
        display:inline-block;
        border:1px solid #000;
    }
    
    <div id="container_outer">
        <div id="container_inner">
            <div id="content">
                动态内容...<br/>  
                动态内容...<br/>
                动态内容...
            </div>
        </div>
    </div> 
    

    a、table table-cell vertical-align:middle; 保证了垂直居中
    b、 text-align:center; display:inline-block; 保证了水平居中

    相关文章

      网友评论

          本文标题:水平垂直居中

          本文链接:https://www.haomeiwen.com/subject/lcwllqtx.html