CSS - 垂直水平居中方法

参考链接

整理搬运css垂直水平居中方法,区分内联元素与块级元素

内联元素居中方法

水平居中设置:

  • 行内元素 设置 text-align:center;
  • Flex布局 设置display:flex;justify-content:center;(灵活运用)

垂直居中设置:

  • 父元素高度确定的单行文本(内联元素),垂直居中:

    设置
    height = line-height;

  • 父元素高度确定的多行文本(内联元素),垂直居中:

    先设置
    display:table-cell 再设置
    vertical-align:middle;

  • 如果在块级元素中包裹有多个行内元素,其中某个元素比较特殊,比如:大写加粗的文字、图片图标,垂直居中:

    该元素设置
    { vertical-align: middle; }

    /* 同时对应 text-bottom/text-top 为下对齐/上对齐 */

块级元素居中方法

移动端,选用方法六和方法七,支持不定宽高的情况
PC端,要考虑兼容性的话,可以选用方法四
PC端,如果中间的元素高度不固定,可以选用方法五

  1. 方法一:position加margin
    兼容性:主流浏览器均支持,IE6不支持

    <!-- html -->
    <div class="wrap">
        <div class="content"></div>
    </div>
    
    /**css**/
    .wrap {
        position: relative;
        width: 200px;
        height: 200px;
        background: pink;
    }
    .wrap .content{
        position: absolute;
        width: 100px;
        height: 100px;
        background: skyblue;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
    }
  2. 方法二: diaplay:table-cell
    兼容性:由于display:table-cell的原因,IE67不兼容

    <!-- html -->
    <div class="wrap">
         <div class="content"></div>
    </div>
    
    /*css*/
    .wrap{
        width: 200px;
        height: 200px;
        background: pink;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }
    .content{
        display: inline-block;
        vertical-align: middle;
        width: 100px;
        height: 100px;
        background: skyblue;
    }
  3. 方法三:position加 transform
    兼容性:ie9以下不支持 CSS3新属性transform,移动端表现较好

    <!-- html -->
    <div class="wrap">
        <div class="content"></div>
    </div>
    
    /* css */
    .wrap {
        position: relative;
        background: pink;
        width: 200px;
        height: 200px;
    }
    .content{
        position: absolute;
        background: skyblue;
        top:50%;
        left:50%;
        -webkit-transform:translate(-50%,-50%);
        transform:translate(-50%,-50%);
        width: 100px;
        height: 100px;
    }
  4. 方法四:position(固定宽高)
    兼容性:适用于所有浏览器

    <!-- html -->
    <div class="wrap">
       <div class="content"></div>
    </div>
    
    /* css */
    .wrap {
        background: pink;
        width: 200px;
        height: 200px;
        position: relative;
    }
    .content{
        background: skyblue;
        position: absolute;
        width: 100px;
        height: 100px;
        left: 50%;
        top: 50%;
        margin-left:-50px;
        margin-top:-50px;
    }
  5. 方法五:兼容低版本浏览器,不固定宽高

    <!-- html -->
    <div class="table">
        <div class="tableCell">
            <div class="content">不固定宽高,自适应</div>
        </div>
    </div>
    
    /*css*/
    .table {
        height: 200px;/*高度值不能少*/
        width: 200px;/*宽度值不能少*/
        display: table;
        position: relative;
        float:left;
        background: pink;
    }      
    
    .tableCell {
        display: table-cell;
        vertical-align: middle;
        text-align: center;        
        *position: absolute;
        padding: 10px;
        *top: 50%;
        *left: 50%;
    }
    .content {
        *position:relative;
        *top: -50%;
        *left: -50%;
         background: skyblue;
    }
  6. 方法六:flex;align-items: center;justify-content: center
    适合移动端

    <!-- html -->
    <div class="wrap">
        <div class="content"></div>
    </div>
    
    /* css */
    .wrap {
        background: pink;
        width: 200px;
        height: 200px;
        display: flex; 
        /*垂直居中*/
        align-items: center; 
        /*水平居中*/
        justify-content: center;
    }
    .content{
        background: skyblue;
        width: 100px;
        height: 100px;
    }
  7. 方法七:display:flex;margin:auto
    适合移动端

    <!-- html -->
    <div class="wrap">
       <div class="content"></div>
    </div>
    
    /* css */
    .wrap {
        background: pink;
        width: 200px;
        height: 200px;
        display: flex; 
    }
    .content{
        background: skyblue;
        width: 100px;
        height: 100px;
        margin: auto;
    }
    原文作者:澄海风
    原文地址: https://segmentfault.com/a/1190000018666788
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞