0元购京东自营斐讯K2路由器返399元活动
置顶

实现图层在竖直和水平方向绝对居中的CSS代码

作者:     目录: 小代码     发表: 2010年07月05日

以前利用表格可以很容易实现竖直和水平方向绝对居中,进入Web 2.0后,网页设计提倡去表格化,目前依然有大量的实例要求图层元素竖直和水平方向绝对居中,例如常见的弹出效果,这里分享一下如何利用CSS来实现竖直和水平方向绝对居中。
实现图层在竖直和水平方向绝对居中的CSS代码:

#mydiv {
	position:absolute;
	top: 50%;
	left: 50%;
	width:350px;
	height:300px;
	margin-top: -150px; /* 顶边距设置为高度的 1/2 */
	margin-left: -175px; /*左边距设置为宽度的 1/2 */
	border: 2px solid #2982C6;
	background-color: #FFF;
    text-align: center;
}

具体实例预览

上面的CSS代码其实很好理解,首先要绝对定位,然后设置绝对定位的top和left属性值(50%),目的是使左上角的坐标位于父层元素高度和长度方向的中心(50%),然后将顶边距和左边距各往相反方向偏移高度和长度方向的一半(1/2)。

标签: .

4 个评论

  1. 记忆盒子 says:

    图层定位很令人头疼,我经常要用table来代替div。

  2. 刘志猛 says:

    呵呵,非常喜欢博主的文章!
    最近学CSS的

  3. 任鸟飞 says:

    @刘志猛 谢谢!以后会尽可能提供更多有质量的文章,希望以后常来常往。

发表评论

电子邮件地址不会被公开。 必填项已用*标注