定宽定高div的居中/对某区域字体点击改变代码的复用性

（1）

有一个高500px  宽500px的div，想让它相当于浏览器 左右居中 和 上下居中，不用JS实现，用CSS样式解决。

margin:0 auto；只能左右居中，但是上下居中实现不了。于是想起用position:absolute的办法实现。

#f{
width:200px;
height:200px;
border:1px solid;
position:absolute;             // body不用设置relative，因为附近没父级主动设置relative，那么body就自然是它的父级。
top:50%;
left:50%;
margin:-100px 0 0 -100px;    
}

    这里要注意，如果id=f是1px的话，那么top:50%，left:50%已然让它居中，但是如果有宽度，有高度，则偏移是从左上角为起始位置的，所以width:200px，height:200px，会让它自己向右偏200px，向下偏200px，所以要设置margin-left:-100px，margin-top:-100px;也即一半的距离，把它拉回来。至于当哥说宽，高变化了，没复用性，这可以用js来实现，因为毕竟margin-left和margin-top分别是width和height的一半，分别为负值。