yinyoupoet

如何将一个固定高度的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

分类:

技术点:

相关文章:

  • 2021-12-01
  • 2021-11-09
  • 2021-11-29
  • 2021-11-21
  • 2021-11-19
  • 2021-08-08
  • 2021-08-08
猜你喜欢
  • 2021-10-29
  • 2021-12-11
  • 2021-08-08
  • 2021-08-08
  • 2021-12-20
相关资源
相似解决方案