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

最新推荐文章于 2024-07-15 14:50:38 发布

阿川阿川

最新推荐文章于 2024-07-15 14:50:38 发布

阅读量337

点赞数

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

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

版权

style 专栏收录该内容

21 篇文章

订阅专栏

本文介绍如何在网页设计中实现元素的全屏显示及垂直居中效果，包括设置html和body的高度为100%，以及使用fixed定位和flex布局来达到目标。适用于前端开发者学习和实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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; /*交叉轴居中*/
}