当前位置: 代码迷 >> Web前端 >> 设置网页下上左右都居中的办法
  详细解决方案

设置网页下上左右都居中的办法

热度:103   发布时间:2012-10-06 17:34:01.0
设置网页上下左右都居中的办法

我开始以为上下居中不可能,在网上搜索良久,才知道凡事都有可能哦,不说废话,看代码

如果只设置网页左右居中的话,直接设置div的margin属性为:distance-top auto;即可设置水品居中。

垂直居中的方法:我只找到一种增添空元素的方法,代码如下:

<style type="text/css">
<!--
#outer{????????????????????????????????? //该div用来匹配你的屏幕高度
height:100%;???
}
#inter{????????????????????????????????? //绝对定位,这个div块儿起点距屏幕上边框50%,距离左边框也是50%,这样

position:absolute;??????????????? //你想要居中显示的那些内容就放在这个块儿里,用绝对定位设置上和左的距离
top:50%;????????????????????????????? //即距离该div上方是(-居中内容的高度的一半),距离左方是(-居中内容的宽度的一半)
left:50%;???
}
#content{
position:absolute;
padding:0px;
width:400px;
height:1500px;
margin:-750px -200px;????????? //设置距离上个div块儿的距离,是负值,因为上一个div的起点正好是中间,咱就让你要居中显示的
background-color:#9F0;?????? //内容中心正好在上个div的起点就好了
}
-->
</style>
</head>

<body>
<div id="outer">
<div id="inter">
<div id="content">
</div>
</div>
</div>
</body>

?

  相关解决方案