在网页制作的过程中，为方便读者的阅读，会把网页内容限定在一个较小的方框中，并居中显示，如何实现这一功能呢？

1）把正文放在一个<div>标签中，只要这个标签居中整个网页就居中了。

<div id="text"> </div>

2）接下来要介绍一种方法：负边框，即 margin 的值为负

#text{

    padding-left: 50%;

    width: 1000px;

    margin-left: -500px

}

这样页面就居中了。

转载自个人网站，注明出处：http://www.cirno.win/insert/page.php?id=7

css实现页面居中的一种方法的更多相关文章

  1. [转] 用javascript修改css伪类的几种方法

    用javascript修改css伪类的几种方法: Modify pseudo element styles with JavaScript http://pankajparashar.com/post ...

  2. 顽石系列：CSS实现垂直居中的五种方法

    顽石系列:CSS实现垂直居中的五种方法 在开发过程中,我们可能沿用或者试探性地去使用某种方法实现元素居中,但是对各种居中方法的以及使用场景很不清晰.参考的内容链接大概如下: 行内元素:https:// ...

  3. css隐藏元素的几种方法与区别

    css隐藏元素的几种方法与区别 一:display:none;隐藏不占位 display 除了不能加入 CSS3 动画豪华大餐之外,基本效果卓越,没什么让人诟病的地方. 二:position:abso ...

  4. 用css隐藏元素的5种方法

    .green { width: 100px; height: 100px; background-color: #a0ee00; text-align: center; float: left; ma ...

  5. [转]-CSS 元素垂直居中的6种方法

    原文地址:http://blog.zhourunsheng.com/2012/03/css-%E5%85%83%E7%B4%A0%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD ...

  6. 提高CSS文件可维护性的五种方法

    当完成一项前端的工作之后,许多人都会忘记该项目的结构与细节.然而代码并不是马上就能完全定型,在余下的时间里还有不断的维护工作,而这些工作也许不会是你自己完成.所以,结构优良的代码能很大程度上优化它的可 ...

  7. CSS 元素垂直居中的 6种方法

    利用CSS进行元素的水平居中,比较简单,行级元素设置其父元素的text-align center,块级元素设置其本身的left 和 right margins为auto即可.本文收集了六种利用css进 ...

  8. 使用CSS、JS的几种方法

    引用CSS到html网页里的4种方法 1.行内式 在标记的style属性中设定CSS样式,这种方式本质上没有体现出CSS的优势,因此不推荐使用     <div style="widt ...

  9. 纯CSS实现垂直居中的几种方法

    垂直居中是布局中十分常见的效果之一,为实现良好的兼容性,PC端实现垂直居中的方法一般是通过绝对定位,table-cell,负边距等方法.有了css3,针对移动端的垂直居中就更加多样化. 方法1:tab ...

随机推荐

  1. openstack controller ha测试环境搭建记录（六）——配置keystone

    在所有节点的hosts文件添加:10.0.0.10 myvip 在所有节点安装# yum install -y openstack-keystone python-keystoneclient# yu ...

  2. nexus 中央仓库

    nexus 中央仓库 下载地址:http://www.sonatype.org/nexus/archived 下载最新版本 mkdir -p /opt/local/nexus tar zxvf nex ...

  3. Nginx 中 nginx.conf 详解

    #定义Nginx运行的用户和用户组 user www www; #nginx进程数,建议设置为等于CPU总核心数. worker_processes 8; #全局错误日志定义类型,[ debug | ...

  4. (中等) HDU 4979 A simple math problem. , DLX+重复覆盖+打表。

    Description Dragon loves lottery, he will try his luck every week. One day, the lottery company brin ...

  5. readln

    常用于暂停程序的运行!可以不带参数,read必须带参数; 使用原则: 1.没有特殊需要,一个程序中避免同时使用read 和readln: 2.尽量使用readln语句来输入数据,一个数据行对应一个re ...

  6. nodejs抓取数据二(列表解析)

    这里做得比较暴力,没有分页取出数据解析,O(∩_∩)O哈哈~,居然没有被挂机.不过解析的坑特别多...不过大部分我想要的数据都拿到了. //解析列表数据 var http = require(&quo ...

  7. struts2拦截器-自定义拦截器，放行某些方法（web.xml配置）

    一.web.xml配置 <filter> <filter-name>encodingFilter</filter-name> <filter-class> ...

  8. IOS中APP开发常用的一些接口

    免费的API接口: 1.聚合数据,上面有手机归属地查询等: 2.百度API store:上面有很多免费的接口,可以使用在自己的app中: 3.环信:提供一些用户交互的一些场景等,可以用来做即时通讯软件

  9. UVa 459 - Graph Connectivity

    题目大意:给你一个无向图的顶点和边集,让你求图中连通分量的个数.使用并查集解决. #include <cstdio> #include <cstring> #define MA ...

  10. [Angular Tutorial] 10 -More Templating

    在这一步中,我们会实现电话细节的视图,这在用户点击列表中的一部电话时被展示. ·当您点击列表中的一部电话时,带有电话特定信息的电话细节页面将被展示. 我们打算使用$http来获取我们的数据,以此来实现 ...