Flexbox：中心正文内容

我有这个布局here。我试图让身体内的一切都以中心为中心。除了我在链接代码和下面的代码中尝试过之外，我还尝试向包装添加一个flex-display属性，但那也没有完成。我不完全确定我做错了什么，因为我认为justify-content: center;应该是在做这个伎俩，对吧？Flexbox：中心正文内容

还有一件事：我有这个背景色的丑陋背景色，上面和下面是我的<main>。我怎样才能解决这个问题，而不删除<main>标签（这是我发现迄今为止唯一的想法）？我应该使用包装div而不是主标签吗？

html { 
 
    height: 100%; 
 
    background: #f5f5f5; 
 
} 
 
body { 
 
    height: 100%; 
 
    width: 70%; 
 
    display: flex; 
 
    display: -webkit-flex; 
 
    flex-direction: column; 
 
    -webkit-flex-direction: column; 
 
    font-family: "sans-serif"; 
 
    align-items: center; 
 
    -webkit-align-items: center; 
 
} 
 
.wrapper { 
 
    -webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); 
 
    -moz-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); 
 
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); 
 
    max-width: 980px; 
 
} 
 
header { 
 
    display: flex; 
 
    display: -webkit-flex; 
 
    flex-direction: row; 
 
    -webkit-flex-direction: row; 
 
    justify-content: flex-end; 
 
    -webkit-justify-content: flex-end; 
 
    align-items: center; 
 
    -webkit-align-items: center; 
 
    background: #42A8C0; 
 
    width: 100%; 
 
    color: white; 
 
} 
 
.name-container { 
 
    flex: 1 0 auto; 
 
    -webkit-flex: 1 0 auto; 
 
    text-align: center; 
 
} 
 
.name-container h1 { 
 
    font-weight: 100; 
 
    letter-spacing: 2px; 
 
    font-size: 40px; 
 
} 
 
.name-container h4 { 
 
    font-weight: 500; 
 
    letter-spacing: 1px; 
 
} 
 
.profile-container { 
 
    flex: 0 0 auto; 
 
    -webkit-flex: 0 0 auto; 
 
    background: rgba(0, 0, 0, 0.2); 
 
    display: flex; 
 
    display: -webkit-flex; 
 
    padding: 10px; 
 
} 
 
.social-container { 
 
    display: flex; 
 
    display: -webkit-flex; 
 
    flex-direction: column; 
 
    -webkit-flex-direction: column; 
 
    font-size: 20px; 
 
    margin-top: 10px; 
 
} 
 
.social-container a { 
 
    color: white; 
 
    text-decoration: none; 
 
} 
 
.social-container a:hover { 
 
    text-decoration: underline; 
 
} 
 
.contact-list { 
 
    list-style-type: none; 
 
} 
 
.contact-list .fa { 
 
    margin-right: 10px; 
 
    font-size: 20px; 
 
    vertical-align: middle; 
 
} 
 
.contact-list li { 
 
    margin-bottom: 5px; 
 
} 
 
.portrait-pic { 
 
    border-radius: 50%; 
 
    height: 200px; 
 
    width: 200px; 
 
} 
 
main { 
 
    background: white; 
 
    flex: 1 0 auto; 
 
    -webkit-flex: 1 0 auto; 
 
    width: 100%; 
 
    color: black; 
 
} 
 
section { 
 
    padding-left: 20px; 
 
    padding-right: 20px 
 
} 
 
.summ-box { 
 
    margin: 20px auto; 
 
    text-align: center; 
 
} 
 
p { 
 
    font-weight: 200; 
 
    letter-spacing: 1px; 
 
}

<div class="wrapper"> 
 
    <header> 
 
    <div class="name-container"> 
 
     <h1>My Name</h1> 
 
     <h4>Small summary of current position</h4> 
 
    </div> 
 
    <!--/name-container--> 
 
    <div class="profile-container"> 
 
     <div class="social-container"> 
 
     <ul class="contact-list"> 
 
      <li class="email"><a href="mailto: [email protected]"><i class="fa fa-envelope" aria-hidden="true"></i></a><a href="mailto: [email protected]">[email protected]</a> 
 
      </li> 
 
      <li class="website"><a href="http://www.google.com" target="_blank"><i class="fa fa-globe" aria-hidden="true"></i></a><a href="http://www.google.com" target="_blank">portfoliosite.com</a> 
 
      </li> 
 
      <li class="linkedin"><a href="http://www.google.com" target="_blank"><i class="fa fa-linkedin" aria-hidden="true"></i></a><a href="http://www.google.com" target="_blank">linkedin.com/inname</a> 
 
      </li> 
 
      <li class="github"><a href="http://www.google.com" target="_blank"><i class="fa fa-github" aria-hidden="true"></i></a><a href="http://www.google.com" target="_blank">github.com/username</a> 
 
      </li> 
 
      <li class="twitter"><a href="http://www.google.com" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a><a href="http://www.google.com" target="_blank">@twittername</a> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
     <!--/social-container--> 
 
     <div class="picture-container"> 
 
     <img src="https://cdn.pixabay.com/photo/2016/02/22/18/57/puppy-1216269_960_720.jpg" class="portrait-pic"> 
 
     </div> 
 
     <!--/picture-container--> 
 
    </div> 
 
    <!--/profile-container--> 
 
    </header> 
 
    <!--/header--> 
 
    <main> 
 
    <section class="summ-box"> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tria genera bonorum; Nec vero alia sunt quaerenda contra Carneadeam illam sententiam. Quae quidem vel cum periculo est quaerenda vobis; Beatum, inquit. Duo Reges: constructio interrete.</p> 
 
     <div class="line-break"></div> 
 
     <!--/line-break--> 
 
    </section> 
 
    <!--/summ-box--> 
 
    </main> 
 
    <!--/main--> 
 
</div> 
 
<!--/wrapper-->

来源

2017-02-09 kneijenhuijs