最常見(jiàn)的方法就是為每個(gè)區(qū)塊準(zhǔn)備兩層元素：外層用來(lái)實(shí)現(xiàn)滿幅的背景醋安，內(nèi)層用來(lái)實(shí)現(xiàn)定寬的內(nèi)容。
后者是通過(guò) margin: auto實(shí)現(xiàn)水平居中的墓毒。
舉例來(lái)說(shuō)吓揪，采用這種設(shè)計(jì)的頁(yè)腳通常需要把結(jié)構(gòu)代碼寫(xiě)成：
<!--html-->
<footer>
<div class="wrapper">
<!-- 頁(yè)腳的內(nèi)容寫(xiě)在這里 -->
</div>
</footer>
<!--css-->
<style>
footer {
background: #333;
}
.wrapper {
max-width: 900px;
margin: 1em auto;
}
</style>
去除額外嵌套層解決方案
<!--html-->
<div class="box">
因?yàn)楫?dāng)內(nèi)邊距是 50% - 450px 時(shí)，只可能給內(nèi)容留出 900px（2×450px）的可用空
間所计。只有把 width 顯式地設(shè)置為 900px 之外（或大或谢前拧）的其他值，我們才有可能
看出區(qū)別醉箕。由于我們想要得到的內(nèi)容寬度本來(lái)就是 900px
</div>
<!--css-->
<style>
*{
margin: 0;
padding: 0;
}
.box{
height: 500px;
padding: 1rem calc(50% - 500px);
background: #333;
color: #fff;
margin: 100px 0;
}
</style>
思路
最終效果.jpg
