容器撑满占满整个高度，垂直居中等

最新推荐文章于 2022-06-10 17:56:00 发布

阿川阿川

最新推荐文章于 2022-06-10 17:56:00 发布

阅读量316

点赞数

分类专栏： style 文章标签： css3

本文链接：https://blog.csdn.net/tangkthh/article/details/104335558

版权

style 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

容器撑满占满整个高度，垂直居中等

1、height: 100% 需要先定义，html,body 高度为height: 100%才可以起作用。

html, body {
    widht: 100%;
    height: 100%;
}

2、使用position: fixed;

.main{
    position: fixed;
    top: -80rpx;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0 0 80rpx 0;
    display: flex;
    flex-direction: column;
    align-items: center;  /*主轴居中*/
    justify-content: center; /*交叉轴居中*/
}