固定高度的div在屏幕中居中方法

最新推荐文章于 2023-08-13 00:34:20 发布

_吟游诗人

最新推荐文章于 2023-08-13 00:34:20 发布

阅读量869

点赞数

分类专栏： html 文章标签： css html 居中 div居中定位

本文链接：https://blog.csdn.net/qq_32623363/article/details/70186119

版权

7 篇文章 0 订阅

订阅专栏

如何将一个固定高度的div居中在屏幕中间呢？
先来看个例子，定义一个div并设置其高度为600px;
html代码：

<div class='a'></div>

css样式代码：

.a{
    height:600px;
    background-color:#333;
}

让div一直待在屏幕中间其实很简单，只需要在css代码中加上短短几句

.a{
    height:600px;
    background-color:#333;
    position:absolute;
    top:50%;
    margin-top:-300px;
}

注意：-300px不是巧合，是该div的高度的一半

有没有觉得很神奇，其实也很好理解。将div关于屏幕最上方下降50%，也就是该div的最上方刚好在屏幕的中间，然后将div向上移动自身高度的一半，当然就居中啦。

欢迎大家加入QQ群一起交流讨论，「吟游」程序人生——YinyouPoet

关注