第五种方法：
首先设置一个div，设置其的width与height，为了方便观察，我定义了div的背景色为red，代码如下：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #content { height: 240px; width: 300px; background-color: red; } </style> </head> <body> <div id="content"> Content here</div> </body> </html>
效果如下图显示：
现在图片并没有什么居中的显示，接下来要描述的居中方法主要借助position方法，将div的position方式设置为absolute，然后可以设置其left=0，right=0，由于其有宽度，所以接下来设置margin:auto，就可以实现div的水平居中，代码如下：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #content { height: 240px; width: 300px; position: absolute; left: 0; right: 0; margin: auto; background-color: red; } </style> </head> <body> <div id="content"> Content here</div> </body> </html>
效果如下图所示：
同理，由于div有高度，只要设置top=0，buttom=0，在margin为auto的作用下，可以实现其垂直居中，代码如下所示：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #content { height: 240px; width: 300px; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; background-color: red; } </style> </head> <body> <div id="content"> Content here</div> </body> </html>
效果如下所示：
这种方法思路可以单独设置元素的水平居中与垂直居中，且思路简单，但是在IE8 beta中无效