Flexbox：中心内容

Question

我这里有这个布局。 我正在尝试使体内的所有东西居中。 除了我在链接和下面的代码中尝试过的内容之外，我还尝试了向包装器添加flex-display属性，但这并没有成功。 我不完全确定自己在做错什么，因为我相信justify-content: center; 应该是把戏吧？

还有一件事：我的<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: yourname@email.com"><i class="fa fa-envelope" aria-hidden="true"></i></a><a href="mailto: yourname@email.com">yourname@email.com</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--> 

Answer 1

删除width: 70%从body元素中删除width: 70% 。 它不会为居中留下任何额外的空间。

Answer 2

main上方的位是由.summ-box和p标签上的空白引起的。 删除边距并替换为填充。

这就解释了这个问题： https : //css-tricks.com/what-you-should-know-about-collapsing-margins/

您的身体的宽度为70％，并且似乎居中，您的意思是身体的宽度为100％？