如何用html代码实现网页上下居中？

这个问题对很多新手来说都是难以挑战的难度，就是网上有代码很多人都难以了解。其原理很简单，就是把块级元素变成行内元素，定义样式vertical-align:middle，让其垂直居中。这里面有两个难点，1、怎样把块级元素变成行内元素并可以定义大小，而且还要兼容（要了解IElayout）。2、如何用好vertical-align:middle，vertical-align:middle用在表格上很见效，谁都可以用，用在行内元素怎样才能起作用呢等等。\x0d\x0a代码我写给你，你自己去琢磨\x0d\x0a\x0d\x0a.box{display:inline-block}\x0d\x0a.box{*display:inline*zoom:1width:50pxheight:80pxborder:#000 1px solidvertical-align:middle}\x0d\x0ai{display:inline-blockwidth:0height:100%vertical-align:middle}\x0d\x0a\x0d\x0a\x0d\x0a\x0d\x0a\x0d\x0a\x0d\x0a \x0d\x0a afdafd\x0d\x0a

创建一个div

<div id="center">内容</div>

写如下语句

<style>

#center {

margin:0 auto

}

</style>

还可以再其中定义其高，宽，背景等

具体请参考css相关知识

HTML：

CSS:

这样写的话，三张图片能够垂直平铺，且随着浏览器的缩放而缩放，可以添加alt关于图片的描述，利于SEO，且写法方便，不用考虑兼容性

HTML:

CSS:

在上面样式中，layout表示居中，最大宽度为640px，最小为320px，常用在手机端，

在header中设置padding-top: 11.875%表示的是图片的高度和宽度比例

1，当设置一张图片向上移动且想覆盖上一张图片一部分，那么要绝对定位一下，且使用top，或者bottom的时候，虽然图片能上移下移但是上移后底部的空间还是要占据，这时候要使用margin-top：-n%；使用百分比是相对外层有定位的元素，而且能够随着浏览器缩放大概位置不变。

2，活动页面背景图宽度写死的方法

最外层div设置最大宽度和最小宽度，居中，且写背景色，或者在body写背景色，第二层div设置背景图，居中，最大宽度定死

HTML:

CSS:

3，在写手机端页面的时候有事设计稿高度不够，此时为了自适应满屏，需要在HTML和body中设置高度100%

---