常见的CSS水平垂直居中设置

让内容上下居中在布局时是经常写的,下面写了常见的4中上下居中方式,复制代码查看效果

css代码

<style>
    *{
        margin: 0;
        padding: 0;
    }
    body{
        padding:10px 50px;
    }
    .parent{
        width: 400px;
        height: 200px;
        background: #b99eff;
    }
    .child{
        width: 150px;
        height: 100px;
        background: #db6867;
    }

    /*flex水平居中和垂直居中*/
    .flex-parent{
        display: flex;  /* 给父元素设值*/
        justify-content: center; /* 水平居中 */
        align-items: center; /*垂直居中*/
    }
    .flex-child{

    }

    /*table水平垂直居中*/
    .table-parent{
        display: table-cell;
        text-align: center;  /*水平居中*/
        vertical-align: middle; /*垂直居中*/
    }
    .table-child{
        display: inline-block;
    }

    /*absolute+transform 水平垂直居中*/
    .transform-parent{
        position: relative;
    }
    .transform-child{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    /*绝对定位方式+四个方向置0*/
    .position-parent{
        position:relative
    }
    .position-child{
        margin:auto;
        height: 100px;
        width: 100px;
        position: absolute;
        top: 0; left: 0; bottom: 0; right: 0;
    }

</style>

html代码

<h3>flex水平居中和垂直居中</h3>
    <div class="parent flex-parent">
        <div class="child flex-child">缺点:有兼容性问题</div>
    </div>

    <br><hr><br>

    <h3>table水平垂直居中</h3>
    <div class="parent table-parent">
        <div class="child table-child"></div>
    </div>

    <br><hr><br>

    <h3>absolute+transform 水平垂直居中</h3>
    <div class="parent transform-parent">
        <div class="child transform-child"></div>
    </div>

    <br><hr><br>

    <h3>绝对定位方式+四个方向置0</h3>
    <div class="parent position-parent">
        <div class="child position-child"></div>
    </div>

以上四种上下居中方式,向父级元素里面添加元素时布局发生的改变会不一样,修改代码即可发现

版权声明:除特别注明外,本站所有文章均为田珊珊个人博客原创

转载请注明:出处来自田珊珊个人博客 » 常见的CSS水平垂直居中设置

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注

  1. 惠眼说道:

    能否在短时间内多次评论呢?

    1. wp_tianshan说道:

      @惠眼 亲,为什么要多次评论呢? :neutral:

  2. 惠眼说道:

    博主,你好呀! :smile:

  3. godaddy优惠码说道:

    朋友 交换链接吗

  4. 大佬手赚网说道:

    谢谢博主的分享 期待博主的更新

  5. 三五创业网说道:

    找了好久才找到这里,来了就不想走!

  6. 营销软件说道:

    新年虽已过,好运不打折!

  7. 朱绪博客说道:

    用户体验很重要 所以优化要做好