美文网首页
css让容器水平垂直居中你有几种方法

css让容器水平垂直居中你有几种方法

作者: 星飞822 | 来源:发表于2018-11-30 18:28 被阅读0次

    用css让一个容器水平垂直居中;知道几种?
    这种方法比较多,本文总结其中的几种,以便加深印象。
    效果图都为这个:


    image.png

    方法一:position加margin

    /**html**/
    <div class="wrap">
        <div class="center"></div>
    </div>
    
    /**css**/
    .wrap {
        width: 200px;
        height: 200px;
        background: red;
        position: relative;
    }
    .wrap .center {
        width: 100px;
        height: 100px;
        background: blue;
        margin: auto;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }
    
    

    兼容性:主流浏览器均支持,IE6不支持

    方法二: diaplay:table-cell

    <!-- html -->
    <div class="wrap">
         <div class="center"></div>
    </div>
    
    /*css*/
    .wrap{
        width: 200px;
        height: 200px;
        background: red;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }
    .center{
        display: inline-block;
        vertical-align: middle;
        width: 100px;
        height: 100px;
        background: blue;
    }
    
    

    兼容性:由于display:table-cell的原因,IE6\7不兼容

    方法三:position加 transform

     <!-- html -->
    <div class="wrap">
    <div class="center"></div>
    </div>
    /* css */
    .wrap {
        position: relative;
        background: red;
        width: 200px;
        height: 200px;}
    .center {
        position: absolute;
        background: blue;
        top:50%;
        left:50%;
        -webkit-transform:translate(-50%,-50%);
        transform:translate(-50%,-50%);
        width: 100px;
        height: 100px;
    }
    
    

    兼容性:ie9以下不支持 transform,手机端表现的比较好。

    方法四:flex;align-items: center;justify-content: center

    <!-- html -->
    <div class="wrap">
        <div class="center"></div>
    </div>
    
    /* css */
    .wrap {
        background: red;
        width: 200px;
        height: 200px;
        display: flex; 
        align-items: center; 
        justify-content: center;
    }
    
    .center {
        background:  blue;
        width: 100px;
        height: 100px;
    }
    
    

    移动端首选

    方法五:display:flex;margin:auto

    <!-- html -->
    <div class="wrap">
        <div class="center"></div>
    </div>
    
    /* css */
    .wrap {
        background: red;
        width: 200px;
        height: 200px;
        display: flex; 
    }
    
    .center {
        background: blue;
        width: 100px;
        height: 100px;
        margin: auto;
    }
    
    

    移动端首选

    方法六:纯position

    <!-- html -->
    <div class="wrap">
        <div class="center"></div>
    </div>
    
    /* css */
    .wrap {
        background: red;
        width: 200px;
        height: 200px;
        position: relative;
    }
    /**方法一**/
    .center {
        background: blue;
        position: absolute;
        width: 100px;
        height: 100px;
        left: 50px;
        top: 50px;  
    
    }
    /**方法二**/
    .center {
        background: blue;
        position: absolute;
        width: 100px;
        height: 100px;
        left: 50%;
        top: 50%; 
      margin-left:-50px; 
      margin-top:-50px;
    } 
    
    

    兼容性:适用于所有浏览器

    方法一:计算公式如下:

    子元素(conter)的left值计算公式:left=(父元素的宽 - 子元素的宽 ) / 2=(200-100) / 2=50px;
    子元素(conter)的top值计算公式:top=(父元素的高 - 子元素的高 ) / 2=(200-100) /2=50px;

    方法二:计算公式如下:

    left值固定为50%;子元素的margin-left= -(子元素的宽/2)=-100/2= -50px;
    top值也一样,固定为50%;子元素的margin-top= -(子元素的高/2)=-100/2= -50px;

    暂时总结上面的六种,这种方法太多,其实只要习惯了其中的一两种也就够用了。

    总结一下:

    如果是移动端,那么用方法四和方法五是比较方便的。而且支持不固定宽高的情况,快、准、狠

    也就是用 flex; align-items: center; justify-content: center;
    或者 display:flex;margin:auto;

    如果是PC端,要考虑兼容性的话。方法六是不错滴,也就是纯position。

    相关文章

      网友评论

          本文标题:css让容器水平垂直居中你有几种方法

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