<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <title>CSS Flex-basis Test</title> <link href="mailto:zhangcs_423@163.com" rel="author" title="Chunsheng Zhang" /> <style type="text/css"> #container { display: flex; justify-content: center; align-items: center; border: 5px solid green; width: 600px; height: 200px; padding: 5px; border-radius: 3px; position: absolute; top: 70px; left: 10px; } #a { top: 150px; left: 230px; border: 2px dotted blue; background: green; border-radius: 3px; padding: 10px; width: 30px; height: 40px; text-align: center; flex: none; } #b { top: 150px; left: 283px; border: 2px dotted blue; background: green; border-radius: 3px; padding: 10px; width: 30px; height: 40px; text-align: center; flex: none; } #c { top: 150px; left: 336px; border: 2px dotted blue; background: green; border-radius: 3px; padding: 10px; width: 30px; height: 40px; text-align: center; flex: none; } </style> </head> <body> <p>This case tests that flex items center</p> <p>The test passes if there is no red</p> <section id="container"> </section> <div style="position:absolute" id="a"></div> <div style="position:absolute" id="b"></div> <div style="position:absolute" id="c"></div> </body></html>