未知高度和宽度元素的水平垂直居中 flex布局轻松解决
- 2018-01-03 11:15:00
- admin 原创
- 420
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>未知高度和宽度元素的水平垂直居中 flex布局轻松解决</title> </head> <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> <body> <div id='container'> <div id = 'center'>#center</div> </div> </body> </html>
文章分类
联系我们
电话: | 18902328227 |
---|---|
Email: | 2689701946@qq.com |
QQ: | 2689701946 |
微信: | 18902328227 |
地址: | 广州番禺区繁华路 |