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

1、首先先进行文本框的插入，在word文档编辑界面上，单击上方工具栏中的“插入”按钮，包括文本框，所有的插入选项都在这里。

2、在“插入”选项的下拉工具栏中，选择如图所示“文本框”图标单击。

3、接下来会d出文本框样式的选择框，在里面可以根据需要选择文本框样式。这里以简单文本框为例，单击选择框中的”简单文本框“。

4、在文档编辑区出现的如图所示文本框中，将原有的选择文字删去就可以编辑文字了。

5、编辑好文字后，选中刚才编辑的文字。接下来进行的是对于文字居中了。

6、单击上方工具栏中的“开始”选项，会出现下拉工具栏。关于文本的设置就在这里。

7、在“开始”选项的下拉工具栏中，“段落”设置中的“居中”设置。

8、至此设置完毕，可看到文本框中选中的文字已经在文本框中央，单击任意空白处取消选中即可。

9、完成效果如下。

在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>

---