css+div让布局居中

css布局被认为是 难以理解的,特别是对新手来说说,我最初学习css的时候 也是这种感觉,初学的朋友 也向我抱怨过这个问题。其实我感觉当你回过头来再看 那些典型的例子的时候会发现真的没什么难以理解的。今天我就介绍两种让布局居中的方法,前几天baidu了一下“css布局居中”,结果没发现有意义的东西,所以今天写这篇文章

方法一 :利用auto maigins
先设置一个要居中的div
  1. <body>
  2. <div id="wrap">
  3. </div>
  4. </body>
 
然后css
  1. #wrapper {
  2. width: 720px;
  3. margin: 0 auto;
  4. }
这样在大部分主流浏览器都是可以的,但是在IE6是 不 能正常显示的,解决 办法
修改css
  1. body {
  2. text-align: center;
  3. }
  4. #wrapper {
  5. width: 720px;
  6. margin: 0 auto;
  7. text-align: left;
  8. }
IE会把text-align: center;理解为让所有的东西 都居中,这样就解决了兼容问题。
方法二:使用定位和负值空白边
只要改一下css代码
  1. #wrapper {
  2. width: 720px;
  3. position: relative;
  4. left: 50%;
  5. margin-left: -360px;
  6. }
至于为什么这样做大家自己分析下吧,很简单的,没什么大道理。

你可能感兴趣的:(css,div,布局,居中,休闲)