一个很是简单的布局，本身备注看的

这样的一个页面如何布局问题。

上面生成试题部分很简单，一个满横屏，而后居中。

<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将再也不起做用，你们细细一想就明白为何了。