本站公告: 暂无公告....

前端开发:使DIV上下左右居中(如何使一个div绝对居中显示)

前端开发 兰亭楼 0评论 853浏览

使DIV绝对居中于浏览器中心,如果浏览器改变大小,div始终上下左右都居中.

代码如下:

div {
width:600px;
height:400px;
position:absolute;
top:50%;
left:50%;
margin-top:-200px;
margin-left:-300px;
border:1px solid #008800;
}

效果如下:






代码讲解:

width:600px;height:400px; 首先定义div的长款

position:absolute;绝对定位div,使它的位置永远相对于浏览器边框.

top:50%;left:50%; 是div四个角中的左上角居于浏览器中央.注意此处定义top和left值是相对于div的左上角,此刻div的位置应该为如图所示.



(此时我们只要把div往左移动整个div宽度的二分之一,再往上移动整个div高度的二分之一就可以了)
margin-top:-200px;margin-left:-300px; 这里要用负值,因为top:50%;left:50% 已经把div挤过去了,
现在要回左和上,需要用到负值.不可用正值,那会更偏左偏下.也不可用margin-bottom 和magrin-right.
原因需要大家自己去领会.
border:1px solid #008800; 这一句主要是为了做一个边框方便直接看到div的位置,无其他用途.

转载请注明: 兰亭楼 » 前端开发:使DIV上下左右居中(如何使一个div绝对居中显示)

发表我的评论 换个身份
取消评论

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址