<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>垂直居中Demo</title> <style> #container{ height:300px; background:#d6d6d6; display:flex; justify-content:center; align-items: center; } #center{ width:100px; height:100px; background-color:#666; color:#fff; font-weight:bold; font-size:18px; display:flex; /*这个写在这只是为了#center这几个字的垂直居中*/ justify-content:center; align-items: center; } </style> </head> <body> <div id='container'> <div id = 'center'>#center</div> </div> </body> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » 未知高宽的水平垂直居中 喜欢 (0)or分享 (0)
