css 通过绝对定位实现水平垂直居中

最新推荐文章于 2025-03-24 00:05:18 发布

haoyanyu_

最新推荐文章于 2025-03-24 00:05:18 发布

阅读量298

点赞数 2

分类专栏： css

本文链接：https://blog.youkuaiyun.com/haoyanyu_/article/details/82664828

版权

css 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了一种使用CSS实现元素在父容器内水平垂直居中的方法。通过设置内外层div的样式属性，如position和margin:auto，使得内层元素无论大小都能在父容器中精确居中。此方法适用于固定尺寸或百分比尺寸的元素。

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

知识点： margin: auto;

效果图：

代码：

html:

<div class="outer">
    <div class="inner"></div>
</div>

css:

.outer {
    width: 100vw;
    height: 100vh;
    position: relative;
    background: rgba(0,0,0,.6);
}
.inner {
    width: 50%;
    height: 400px;
    background: red;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left:0;
    margin: auto;
}