一聚教程网：一个值得你收藏的教程网站

ps教程| flash教程| 路由器设置| Jsp教程| 加入收藏

PHP教程 Css教程 操作系统 数据库 安卓下载 AI头条

首页 游戏下载 软件下载 专题 资讯教程 php教程 asp.net教程 css教程 网页制作 网页特效 手机开发 办公数码
+ -
当前位置：一聚教程网 > css教程 > 常用代码

推荐专题

最新下载

热门教程

css实现网页内容整体居中的三种方法总结

时间：2022-06-25 09:34:25 编辑：袖梨 来源：一聚教程网

例

代码如下 复制代码





内容居中



无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档无标题文档

测试文件index.html的代码其中外部的style.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;
}

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

相关文章

热门栏目

一聚教程网| 关于我们| 联系我们| 广告合作| 友情链接| 版权声明

copyRight@2007-2022 www.111CN.NET AII Right Reserved

网站内容来自网络整理或网友投稿如有侵权行为请邮件:[email protected] 我们24小时内处理