如何用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

在css的样式中加入，text-align: center这样文件就是决定居中了！

垂直居中

<style type="text/css">

<!--

.con_div{

width:400px

height:300px

border:1px solid #777

text-align:center

display:table-cell

vertical-align:middle

background:red

color:#fff

}

/*FOR IE*/

.fixie{

width:0

height:100%

display:inline-block

vertical-align:middle

}

-->

</style>

<div class="con_div">

<span class="fixie"></span>

测试内容

</div>

---