单个div都知道用margin :XX px auto;来实现,但对于多个块级元素呢?那就把这些块级元素如div设置为display:inline-block;再把父元素设置为text-align:center;即可。text-align:center;本是用于设置父元素中的文本的,这里一旦把子块级元素设为inlin-block后一样有效。
还有一种新方法:
那就是把父元素设为display: flex; 且justify-content:center。(新属性需要新浏览器哦)
<html> <head> <title></title> <style> body{ color:#333; font-size:12px; display: flex; justify-content:center } div{ 200px; height: 200px; } #d1{ background: red; } #d2{ background: blue; } #d3{ background: yellow; } </style> <script> </script> </head> <body> <div id='d1'></div> <div id='d2'></div> <div id='d3'></div> </body> </html>很简单,就不上图啦。