第五种方法:
首先设置一个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中无效