Html div部分居中，但可以'；我不能把它集中起来

因此，我将页眉、页脚和内容容器都放在一个容器中，我试图使其中的所有内容都居中，当窗口调整大小时，使其动态居中（包括将公文包显示框推到堆栈）。我使用了left/right属性来定位导航和页脚（主要问题），但这并不理想，因为它不是基于列表最中间的元素居中，而是通过第一个元素来定位列表。如何根据列表的长度将页眉和页脚居中，而不是定位第一个元素？无论我添加了多少元素，它都应该能够工作。谢谢

<div class = "container">

        <ul class = "nav">
            <li><a href = "#">PORTFOLIO</a></li>
            <li><a href = "cv.html">CV</a></li>
            <li><a href = "contact.html">CONTACT</a></li>
        </ul>

        <a id = "name" href = "index.html">CATHERINEROSEART</a>

        <div id = "wrapper">

            <div id = "content">   

                <div class = "portfoliowrapper">
                    <div class = "left">
                        <a href = "#">
                            <div id = "box-1" class = "box">  
                                <img id = "image-1" src = "img/1.jpg"/>  
                                <div class = "caption fade-caption">  
                                    <h3>Piece 1</h3>  
                                    <p class = "captp">Piece 1</p>
                                </div>  
                            </div>
                        </a>
                    </div>
                    <div class = "middle">
                        <a href = "#">
                            <div id = "box-2" class = "box">  
                                <img id = "image-2" src = "img/1.jpg"/>  
                                <div class = "caption fade-caption">  
                                    <h3>Piece 2</h3>  
                                    <p class = "captp">Piece 2</p>  
                                </div>  
                            </div>
                        </a>
                    </div>
                    <div class = "right">
                        <a href = "#">
                            <div id = "box-2" class = "box">  
                                <img id = "image-2" src = "img/1.jpg"/>  
                                <div class = "caption fade-caption">  
                                    <h3>Piece 2</h3>  
                                    <p class = "captp">Piece 2</p>  
                                </div>  
                            </div>
                        </a>
                    </div>

                </div>

            </div>



            <div id = "footer">
                <ul class = "nav">
                    <li><a href = "#">Facebook</a></li>
                    <li><a href = "https://twitter.com/cathychYEAH" target = "_blank">Twitter</a></li>
                    <li><a href = "https://plus.google.com/u/0/+CatherineBrooks/posts" target = "_blank">Google+</a></li>
                    <li><a href = "http://uk.linkedin.com/pub/catherine-rose-brooks/61/7/563" target = "_blank">LinkedIn</a></li>
                    <li><a href = "http://catherineroseart.bigcartel.com/" target = "_blank">BigCartel</a></li>
                </ul>
                <p>© Catherine Brooks 2013 </p>
            </div>

        </div>

---

元素偏离中心的原因是，默认情况下，

有一些剩余的填充（通常是为了给项目符号留出空间）

添加

.nav{padding:0}

，您应该都很好

---

另外，请注意，您的

.nav ul

样式没有任何作用。要应用，选择器应为

ul.nav

，无空格。然而，在这种情况下，它们是不需要的，事实上会损害您的布局。只需移除该块。

尝试将其清理干净一点：

HTML:

CSS-Wrapper（未编辑单个图片框等）

CSS-页脚

/* footer style */

#footer {
    margin: 0 auto;
    position: fixed;
    width: 100%;
    padding: 0;
    bottom: 0;
    clear: both;
}

#footer p {
    padding: 5px; /*suggestion, since the copyright text changed from the original*/
    text-align: center;
    color: #C7C7C7;
    font-size: 8px;
}

#footer .nav li a {
    color: #333333;
}

#footer .nav li a:hover {
    color: #A6A6A6;
}

---

人们会假设最隐蔽的部分是宽度为1000px的地方.nav元素具有

位置：fixed

；）我当时误解了这个问题。我知道他的整页都偏离中心了。这是如果你呈现他的代码：S.My bad。谢谢你的输入。在.left、.middle和.right类中，我让他们以不同的方式设计了这个类，但并没有花时间整理！

<div class = "header">
    <ul class = "nav">
        <li><a href = "#">PORTFOLIO</a></li>
        <li><a href = "cv.html">CV</a></li>
        <li><a href = "contact.html">CONTACT</a></li>
    </ul>
</div>

body{
    margin: 0;
    padding: 0;
}

.container {
    width: 100%;
    margin: 0 auto;
    position: relative;
    padding: 0;
    top: 10%;
    text-align: center;
}

/* nav style */
.header{
    margin: 0 auto;
    position: fixed;
    width: 100%;
    padding: 0;
}

.nav {
    margin: 0 auto;
    width: 100%;
    padding: 0;
}

.nav ul {
    list-style: none;
    margin: 0 auto;
    padding: 0; 
    width: 100%;
}

.nav li {
    border-bottom: 1px solid #ccc;
    padding: 15px 25px 10px 25px;
    font-size: 12px;
    list-style: none; 
    display: inline-block;
    text-align: center;
}

.nav a {
    text-decoration: none;
    color: #C7C7C7;
}

.nav li a:hover {
    color: #A6A6A6;
}

/* end nav style */

#wrapper {
    background: white;
    color: black;
    width: 100%;
    margin: 0 auto;
    display: inline-block;
    text-align: center;
}
.left, .middle, .right { /*Why not just 1 class*/
    width: 31%;
    margin: 0 auto; 
    padding: 10px;
    display: inline-block;
    text-align: center;
}

/* footer style */

#footer {
    margin: 0 auto;
    position: fixed;
    width: 100%;
    padding: 0;
    bottom: 0;
    clear: both;
}

#footer p {
    padding: 5px; /*suggestion, since the copyright text changed from the original*/
    text-align: center;
    color: #C7C7C7;
    font-size: 8px;
}

#footer .nav li a {
    color: #333333;
}

#footer .nav li a:hover {
    color: #A6A6A6;
}