css各种水平垂直居中操作汇总

各种居中操作

虽然很多博文都写过这方面的问题,但是每次碰到都会取查查看,而且对于解释有部分不够详细,这里自己总结一下.

水平居中

方法一:text-align:center

这种方法只针对子元素是行内元素或行内块级元素的情况

    //css
    .big {
    background-color: deepskyblue;
    text-align: center;
    }
    .small {
    background-color: red;
    display: inline-block;
    margin: 0 auto;
    }
    //html

方法二:margin: 0 auto

这种方法主要是利用剩余空间

有几种情况无法居中:

• 绝对定位
• 子元素是行内元素或者行内块级元素
• 没声明DOCTYPE文档类型

注意:有时候对于不能使用行内元素,又希望子元素能按照内容大小控制宽度是,可以用display:table,

也可以用css3属性width:'fit-content’注意兼容 使用了该属性后无论是否脱离标准流 都可以用 margin:0 auto----非常bug了!!!

   //table用法
    //css
     .big {
            background-color: deepskyblue;
            width: 500px;
        }
        .small {
            display: table;
            background-color: red;
            margin: 0 auto;
            height: 100px;
        }
    //html
    <div class="big">
        <div class="small">子元素</div>
    </div>
    
    //width:fit-content  用法
    .big {
    background-color: deepskyblue;
    width: 500px;
    }
    .small {
    width: fit-content;
    width: -moz-fit-content;
    background-color: red;
    margin: 0 auto;
    height: 100px;
    }
    
    <div class="big">
    <div class="small">子元素</div>
    </div>

方法三:绝对定位

左右设为0 配合margin:0 auto

注意:子元素必须是固定宽度,否则直接占满父元素

    //css
      .big {
            background-color: deepskyblue;
            position: relative;
            width: 500px;
            height: 200px;
    
        }
        .small {
            background-color: red;
            height: 100px;
            width: 200px;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
        }

方法四:css3的transform: translateX(-50%)横坐标变形方法

该方法要求子元素的宽度必须

     .big {
            background-color: deepskyblue;
            position: relative;
            width: 500px;
            height: 100px;
    
        }
     .small {
        background-color: red;
        height: 100px;
        width: 200px;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
     }
     
     //html
     <div class="big">
        <div class="small">子元素</div>
    </div>

方法五:margin-left:-XXpx

子元素宽度固定已知的情况

     .big {
            background-color: deepskyblue;
            position: relative;
            width: 500px;
            height: 100px;
    
        }
    .small {
        background-color: red;
        height: 100px;
        width: 200px;
        position: absolute;
        left: 50%;
        margin-left: -100px;
    }
        
        //html
    <div class="big">
        <div class="small">子元素</div>
    </div>

方法六:flex水平居中

flex居中非常方便,只要在父元素上设置在主轴的中心对齐

    .big {
        background-color: deepskyblue;
        width: 500px;
        height: 100px;
        display: flex;
        justify-content: center;
    }
    .small {
        background-color: red;
        height: 100px;
        width: 200px;
    }
    //html
    <div class="big">
        <div class="small">子元素</div>
    </div>

垂直居中

方法一:line-heigh:XXpx

适合单行文本

方法二:行内块级元素或行内元素都可利用vertical-align:center

vertical-align 是设置当前项目与当前行的基线的对齐方式,当前行内有一个高度为父类元素100%的元素时,两个元素同时设置垂直居中对齐,则产生垂直居中效果 这里我用的是给父元素添加伪类的方式实现

        .big {
            background-color: deepskyblue;
            width: 200px;
            height: 100px;
    
        }
        .big::after{
            content:'';
            height:100%;
            display: inline-block;
            vertical-align: middle;
        }
        .small {
            background-color: red;
            display: inline;
            vertical-align: middle;
        }
        //html
        <div class="big">
        <span class="small">子元素</span>
    </div>

方法三:利用display:table-cell;vertical-align:middle;

table-cell的元素通过vertical-align可以垂直居中 ,td/th标签天生就有这样的效果

方法四:利用display: flex; align-items: center;

flex方法总是最简便的 直接设置在父元素上就可实现

方法五 css3transform: translateY(-50%);

同上面水平居中方法四

方法六 绝对定位 配合margin:auto 0

    .small{
        position:absolute;
        top:0;
        bottom:0;
        height:固定;
        margin:auto 0;
    }

同上面水平居中方法三

方法七 固定已知高度 用margin-top:-XXpx

    .son{
        position:absolute;
        top:50%;
        height:固定;
        margin-top:-0.5 * 自身高度;
    }

同上面水平居中方法五

暂时想到这些 如果有补充,可以指出来,谢谢