css水平垂直居中（绝对定位居中）

最新推荐文章于 2024-06-03 18:53:48 发布

前端老码农

最新推荐文章于 2024-06-03 18:53:48 发布

阅读量280

点赞数

分类专栏：前端文章标签： HTML/CSS

原文链接：https://www.mk2048.com/blog/blog.php?id=b0h11ka2j&title=css%E6%B0%B4%E5%B9%B3%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD%EF%BC%88%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D%E5%B1%85%E4%B8%AD%EF%BC%89

版权

前端专栏收录该内容

2065 篇文章 12 订阅

订阅专栏

使用绝对定位有个限制就是父集必须设置一个固定的高度。

首先HTML

1 <div id="box">
2     <div class="child"></div>
3 </div>

CSS

 1 #box {
 2     position: relative;
 3     height: 500px;
 4     background: red;
 5 }
 6 .child {
 7     width: 100px;
 8     height: 100px;
 9     background: blue;
10     margin: auto;
11     position: absolute;
12     top: 0;
13     right: 0;
14     bottom: 0;
15     left: 0;
16 }