CSS-屏幕居中网页内容的三种方法

CSS——屏幕居中网页内容的三种方法

方法一(style.css)：

*{margin:0;padding:0;}

#wrap

{

position:relative;

width:988px;

margin-left:50%;

left:-494px;

height:1200px;

border:solid 1px red;

}

评论：此方法是先定好内容的宽度，然后向左距离整个浏览器的50%，再向左拉回内容宽度的一半

方法二(style1.css)：

*{margin:0;padding:0;}

body{text-align:center;}

#wrap

{

position:relative;

margin:0 auto;

width:988px;

height:1200px;

text-align:left;

border:solid 1px red;

}

评论：此方法是先定好内容的宽度，然后body里面内容居中，然后容器里面内容靠左，注意 margin:0 auto;是为了兼容其他浏览器

方法三(style2.css)：

*{margin:0;padding:0;}

#wrap

{

position:relative;

width:988px;

margin-left:-494px;

left:50%;

height:100%;

border:solid 1px red;

}

评论：和方法一类似，可以对比方法一看

理论上还有其他方法，现在网站上用的是第二种。