【css】实现块内块的水平垂直居中

最新推荐文章于 2022-09-08 14:47:57 发布

richest_qi

最新推荐文章于 2022-09-08 14:47:57 发布

阅读量881

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/qzw752890913/article/details/107734500

版权

css 专栏收录该内容

69 篇文章 4 订阅

订阅专栏

<body>
    <div class="container container-box">
        <div class="content content-box">welcome to join the conference</div>
    </div>
</body>

.container-box{
    width:500px;
    height:100px;
    border:1px solid lightskyblue;
}
.content-box{
    width:360px;
    height:50px;
    border:1px solid lightgray;
}

方式1
实现原理是，vertical-align:middle

.container{
    display:table-cell;
    vertical-align:middle;
}
.content{
    margin:0 auto;
}

在这里插入图片描述

方式2
实现原理是，vertical-align:middle

.container{
    text-align:center;
}
.container:after{
    display:inline-block;
    content:"";
    height:100%;
    vertical-align:middle;
}
.content{
    display:inline-block;
    vertical-align:middle;
    text-align:left;
}

在这里插入图片描述

方式3
实现原理是，margin:auto

.container{
    position:relative;
}
.content{
    position:absolute;
    top:0;bottom:0;
    left:0;right:0;
    margin:auto;
}

在这里插入图片描述

方式4
实现原理：flex布局

.container{
    display:flex;
}
.content{
    margin:auto;
}

方式5
实现原理：flex布局

.container{
    display: flex;
    justify-content: center;
    align-items: center;
}

richest_qi

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录