一個很是簡單的佈局，本身備註看的

這樣的一個頁面如何佈局問題。

上面生成試題部分很簡單，一個滿橫屏，而後居中。

<style>
 h2{height:100px;background:xx;text-align:center;line-heihgt:100px;}
</style>
<h2>生成試題</h2>
<div>那一大坨東西，上面考試碼，按鈕啥的都包括</div>

下面的怎麼佈局？我當時困惑的是，下面文字部分不是居中，若是用padding和margin總感受哪裏不對？

是了，若是用padding-left或者margin-left讓下面的文字與上面生成試題幾個字位置關係到位的話，確定不行。由於，生成試題的位置會隨着瀏覽器寬度而改變。當寬度變小時，生成試題幾個字仍是在屏幕中間，而因爲padding-left或者margin-left是固定值，極可能會超過屏幕寬度而超出。

那怎麼辦呢？一種方法是將h2和div套一個父元素，這2個元素基於同一個父元素進行定位，這樣就能保證位置始終相對一致。 

第二種方法更簡單，h2是基於瀏覽器進行定位的，那只要div也給予瀏覽器窗口定位，那h2和div之間的位置關係就不會改變了。

h2居中，設置div也居中，爲了讓div中的文字和h2中某個位置對應，使用margin偏移下，這樣，h2始終居中，div始終在居中的偏左或偏右的位置，這樣h2和div的相對位置就永遠不會發生改變了！

<style>
 h2{height:100px;background:xx;text-align:center;line-heihgt:100px;}
div{position:absolute;top:100px;left:50%;margin-left:-200px;}
</style>
<h2>生成試題</h2>
<div>那一大坨東西，上面考試碼，按鈕啥的都包括</div>

注意：若是咱們寫left：300px，則margin-left將再也不起做用，你們細細一想就明白爲何了。