怎样让内容居中在浏览器屏幕中间？使用定位后这个内容就不见了

我有四种方法：1.<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>块元素绝对居中</title> <style> html,body,table{ margin:0; height:100%; } table{ width:100%; } #box{ width:300px; height:300px; background:teal; margin:auto; } </style> </head> <body> <table> <tr> <td> <div id="box"></div> </td> </tr> </table> </body> </html> 作者： KevenHuang 链接：http://www.imooc.com/article/16397 来源：慕课网2.<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>块元素绝对居中</title> <style> *{ margin:0; } #box{ width:300px; height:300px; background:maroon; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); } </style> </head> <body> <div id="box"></div> </body> </html> 作者： KevenHuang 链接：http://www.imooc.com/article/16397 来源：慕课网3.<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>块元素绝对居中</title> <style> *{ margin:0; } #box{ width:300px; height:300px; background:silver; position:absolute; left:50%; top:50%; margin-left:-150px; margin-top:-150px; } </style> </head> <body> <div id="box"></div> </body> </html> 作者： KevenHuang 链接：http://www.imooc.com/article/16397 来源：慕课网4.<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>块元素绝对居中</title> <style> *{ margin:0; } #box{ width:300px; height:300px; background:pink; position:absolute; left:0; right:0; top:0; bottom:0; margin:auto; } </style></head><body> <div id="box"></div></body></html> 作者： KevenHuang 链接：http://www.imooc.com/article/16397 来源：慕课网

怎样让内容居中在浏览器屏幕中间？使用定位后这个内容就不见了

1回答