我开始以为上下居中不可能，在网上搜索良久，才知道凡事都有可能哦，不说废话，看代码
如果只设置网页左右居中的话，直接设置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>
分享到：
相关推荐
在网页设计中，"DIV+CSS上下左右绝对居中"是一个常见的布局需求，尤其是在构建响应式网站时。这个主题涉及到CSS（层叠样式表）的布局技巧，它可以帮助元素在不同屏幕尺寸下都能保持在容器的中心位置。下面将详细探讨...
上下左右都居中的CSS+html写法，position:absolute;top:50%;margin-top:-50px;left:50%;margin-left:-50px;
之前给大家介绍过一个上下左右垂直居中的效果 相关链接如下：纯css实现div容器内图片上下左右居中效果 今天再给大家介绍一个部分基于css3的上下左右垂直居中效果 大家都知道给一个div设置相对定位，...
4. **负边距**：对于简单的上下居中，可以将子元素的`margin`设置为`auto`，但这种方法不适用于左右居中。对于左右居中，可以计算元素宽度的一半作为负边距，并设置`margin-left`和`margin-right`。 ```css ....
此前给大家推荐了一个纯css实现div容器内图片、文字上下居中的效果，缺点是采用了部分css3样式，兼容性较差，相关链接：纯css实现div容器内图片上下左右居中效果 今天特意在网上找到了一款插件--jquery.valign，可...
html文本上下左右居中
resizepic 根据图片的实际比例适用外层div的大小，或左右居中显示 或上下居中显示。 完美解决图片缓存后不执行onload事件的情形。兼容 ie ff 谷歌
让Div层上下左右都居中的方法! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/
css：可以令层中层上下左右居中。（即：div之中的div的文本，上下左右居中显示）
html div 自适应剧中 上下左右全部居中
div 图片上下居中，左右居中 ，兼容多版本浏览器
在移动设备上实现元素的上下左右居中是前端开发中的常见需求，特别是在设计响应式网页时。CSS3提供了多种方法来实现这样的效果，使得开发者能够更灵活地控制页面布局。这款名为"CSS3手机移动端上下左右居中代码.zip...
一款不需要任何JS即可控制图片上下左右居中的效果 以前以为必须要JS才能控制图片上下居中的，现在才发现原来css也有这个本事 一半只有table，默认图片才会上下居中，现在只需要加几行css即可实现，高级。使用方法...
"jQuery实现上下左右垂直居中.zip" 提供的是一个名为 "jquery.valign" 的插件，它专用于解决HTML元素（如图片、文字）在div容器内部的垂直对齐问题。下面将详细介绍这个插件的工作原理以及如何使用。 `jQuery....
它可以判断外部div以及内部div的宽度高度，从而实现上下左右居中的目的，兼容主要浏览器 使用方法简单： 1、确保head中引入jquery库以及本例的css样式 2、将代码部分拷贝到你需要的地方 3、在代码...
然而，这个"JQ 页面上下左右居中的插件"可能使用了JavaScript/jQuery来动态计算和设置元素的`top`和`left`属性，以实现元素在父容器中的绝对定位，达到四方向居中的效果。 插件的运作原理可能如下： 1. 获取需要...
此源码不需要依赖其它插件，高速生成二维码，手机web网页端自适应居中显示二维码。 javascript高速生成二维码及手机web网页自适应上下左右居中显示（不依赖其它js）（包含完整源码）
标题中的“懒人原生块级区域内元素上下左右垂直居中方法”指的是在网页设计中，如何不借助复杂的CSS框架或者JavaScript库，而是利用HTML和CSS的原生特性，实现块级元素在容器中水平和垂直居中的技术。这种方法特别...
具体做法是通过设置`div`的`margin`属性为`auto`来自动调整左右间距，使其居中显示。下面是一段示例代码： ```css #wrap { margin: 0 auto; } ``` **解析：** - `margin: 0 auto;`：这行代码表示`#wrap`元素的上...
纯CSS实现上下左右都居中的代码 在前端开发中，实现上下左右都居中的布局是非常常见的需求。传统的方法是使用表格（table）来实现，但这种方法存在一定的局限性。今天，我们将探讨如何使用纯CSS来实现上下左右都...