代码整体为什么无法居中

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>display属性</title>
        <style type="text/css">
          /*样式补充*/
        *{margin:0;padding:0;}
        li{display:none;text-align:center;padding:5px;}
        .elec{border-right:1px #d9dde1 solid;border-left:1px #d9dde1 solid;}
        .wash{border-right:1px #d9dde1 solid;border-left:1px #d9dde1 solid;}
        .clothes{border-right:1px #d9dde1 solid;border-left:1px #d9dde1 solid;}
        .div1:hover li{display:block;}
        .div2:hover li{display:block;}
        .div3:hover li{display:block;}
        .div1,.div2,.div3{width:106px;text-align:center;}
        h3{background-color:#ececec;border:1px #d9dde1 solid;text-align:center;padding:3px;}
        </style>
    </head> 
    <body>
    <div class="big">
        <div class="div1">
            <h3>家电</h3>
            <ul class="elec">
                <li>冰箱</li>
                <li>洗衣机</li>
                <li>空调</li>
            </ul>
        </div>
        <div class="div2">
            <h3>洗护</h3>
            <ul class="wash">
                <li>洗衣液</li>
                <li>消毒液</li>
                <li>柔顺剂</li>
            </ul>
        </div>
        <div  class="div3">
            <h3>衣物</h3>
             <ul class="clothes">
                <li>衬衫</li>
                <li>裤子</li>
                <li style="border-bottom:1px solid #d9dde1">卫衣</li>
            </ul>
        </div>
      </div>
</body>
</html>

不知道为什么无法使内容整体居中自己也查看了好多遍不知道什么原因 ~~~

学东西要快 2017-06-18

源自：盒子模型 4-7 编程练习

收起

1回答

樱桃小胖子回答被采纳获得+3积分 2017-06-18 15:22:18

.big{
        	width:106px;
        	margin:0 auto;
        }

设置最外层的盒子big即可，祝学习愉快~

收起回答

学东西要快提问者 #1

想让盒子模型居中只能用 margin:0 auto进行设置吗？我一直在用text-align:center来给我那段代码进行设置，都不行

2017-06-18 18:10:10
樱桃小胖子回复提问者学东西要快 #2

text-align:center是针文本设置居中的，而不是盒子居中哦~

2017-06-18 19:09:44
学东西要快提问者 #3

非常感谢！

2017-06-18 21:07:25