任鸟飞网站设计博客

以前利用表格可以很容易实现竖直和水平方向绝对居中，进入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）。