css实现div于窗口居中

最新推荐文章于 2025-06-06 22:51:36 发布

原创最新推荐文章于 2025-06-06 22:51:36 发布 · 4.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css

样式小技巧专栏收录该内容

1 篇文章

订阅专栏

本文介绍了三种不同的CSS样式方法来实现网页元素的居中显示，并提供了具体的代码示例。适用于初学者掌握基本布局技巧。

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

样式图：
这里写图片描述

首先页面覆盖整个窗口（无滚动条）

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

居中css:(将罗列三种写法，原理相同，就是可以结合不同语句实现)

第一种：

.content {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 600px;
    height: 300px;
    margin: -150px 0 0 -300px;
    background-color: grey;
}

第二种：

.content {
    position: absolute;
    width: 600px;
    height: 300px;
    top: 0px;
    left: 0px;  
    right: 0px;  
    bottom: 0px; 
    margin: auto; 
    background-color: grey;
}

第三种：（最简洁）

.content {
    position: absolute;
    width: 600px;
    height: 300px;
    top: calc(50% - 150px);
    left: calc(50% - 300px);  
    background-color: grey;
}