代码改变世界

关于水平居中

2014-11-25 23:44  勤劳的插秧哥  阅读(174)  评论(0)    收藏  举报

单个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{
       
        width: 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>
很简单，就不上图啦。