lthtmlltheadltstylehtml，bodytextaligncentermargin0px autoltstyleltheadltbodyltform action=quot#quot method=quotpostquotltspan账号ltspanltinput id=quotinput_textquot type=quottextquotltbrltbrltspan密码lt；2写一个div出来，同时在内部加上一些文字，使用css增加属性，使得div的区域看得清楚3接下来就使用textalign的center属性将文字横向居中，同时设置行高，使这行文字实际占用的高度和div高度相同，就产生了居中效果4。

利用图片的margin属性将图片水平居中，利用DIV的padding属性将图片垂直居中结构代码同上CSS代码如下div width300px height150px backgroundcolor#eee paddingtop50px border#000 1px solid img；利用行业元素SPAN和CSS样式的display block去解决问题行业元素是不能设置高宽的，所以得先display blockdiv布局未添加样式的效果3添加CSS样式4最终实现的效果图。

如果垂直居中的元素高度已知，这个比较简单，也不需要额外的辅助元素 参考下列HTML代码lt！DOCTYPE HTML lthtml lthead ltmeta；备注这里DIV的宽高计算都遵循盒模型原理，计算方法同上方法三思路利用图片的margin属性将图片水平居中，利用DIV的padding属性将图片垂直居中结构代码同上CSS代码如下div width300px height150px background。

div中的div垂直居中

4使用 positionabsolute，有固定宽度和高度的 div这个 div被设置为 top0 bottom0但是因为它有固定高度，其实并不能和上下都间距为 0，因此 marginauto 会使它居中使用 marginauto使块级元素垂直居中。

代码如下2如果是多行文字，上面的垂直居中的方法就不行了，得用变通的方法实现这里建议使用table方法，在table外面再套上相应的div代码如下lttable lttr lttd style=quotverticalalignmiddleheight300pxback。

方法一使用绝对布局位置absolutefordiv并设置topleftrightbottom的值相等，但不一定都等于0并设置边距自动方法二这个方法需要知道div的宽度和高度使用绝对布局位置绝对用于div并将top和left的值设置为50%50。

4讲解第二种div绝对定位水平垂直居中marginauto实现绝对定位元素的居中，代码两个关键点1上下左右均0位置定位2margin auto 其widthheight如何更改都是居中显示的，兼容性可以，IE7及之前版本不支持，如图5。

2html代码ltdiv class=quottablequot ltdiv class=quotcellquotHello， I#39m in the middleltdivltdiv 3完整代码及运行结果lthtml lthead lttitle通过百分比控制文字垂直居中lttitle ltstyle type=quottextcssquot。

1如果是单行文字想垂直居中，只要保证div高和行高保持一致，就可以了用下面的代码即可实现代码如下2如果是多行文字，上面的垂直居中的方法就不行了，得用变通的方法实现这里建议使用table方法，在table外面再套上。

div 内容垂直居中

这样我们就实现了层垂直居中于浏览器的样式编写 注上面的是一般用于垂直居中与浏览器，想解决div垂直居中与外层div的话，只需要给外层div加上positionrelative就好了记住，外层div要设定高度和宽度。

参照以上Html代码，让最外面名为box的Div呈表格样式显示，然后再让box中名为content的Div呈单元格显示，并利用verticalalignmiddle让其垂直居中，这样就模拟出来和表格一样的显示方式，CSS代码如下wrap height400px。

1第一种css代码如图所示display设置成tablecell，textalign为center，垂直居中设置verticalalign为middle2打开浏览器查看结果，图片已处于正中状态3第二种方法css代码如图div设置成相对定位，img设置成绝对定位。