你的位置:首页 > 网页设计

[网页设计]绝对居中


<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta name="author" content="胡超" />
<meta charset="utf-8"/>
<style type="text/css">

#a2{
position:absolute; /*:绝对定位元素不在普通内容流中渲染,因此margin:auto可以使内容在通过top: 0; left: 0; bottom: 0;right: 0;设置的边界内垂直居中。父元素一般为body或者声明为position:relative;的容器。无需知道被垂直居中元素的高和宽。*/
top:0;
right:0;
left:0;
bottom:0;
margin: auto;
width:290px;
height:121px;
border:1px solid red;
}
#a1{
width:500px;
height:500px;
border:1px solid red;
position:relative;
}

</style>
</head>

<body>

<div id="a1">
<div id="a2">

</div>
</div>

</body>
</html>