CSS中让页面居中的技巧

转载 2007年09月13日 14:03:00

源地址:

http://www.bikeroll.com/article.aspx?id=24

 

假设下面的布局:

<body>

       <div id="wrapper"></div>

</body>

有两种方法可以实现我们想要的效果

1.使用自动空白边让设计居中:

#wrapper { width:720px;margin:0 auto;}

但是IE不支持自动空白边,幸运的是IE将text-align:center误解为让所有东西居中,所以可以利用这点来达到我们的要求

body{ text-align:center;}

#wrapper { width:720px;margin:o auto;text-align:left;}

2. 使用定位和负值空白边让设计居中:

#wrapper{width:720px;position:relative;left:50%;margin-left:-360px;}

该样式首先定义容器的宽度,然后将容器的左边缘定位在页面的中间,最后在左边应用一个负值的空白边,宽度等于容器的一半,这样就把容器往左移动它的宽度的一半,从而达到居中的目的。 

转载说明:

第二种做法针对<table>是不太合适的。它会让多个<table>重叠在一起。

 

 

css让div在整个网页水平、垂直居中解决方法

css让div在整个网页水平、垂直居中解决方法废话不说,直接上最终代码。 .div-out{ position: absolute; left:50%...
  • u014288743
  • u014288743
  • 2016年07月07日 12:25
  • 3261

CSS实现居中的7种方法

实现HTML元素的居中 看似简单,实则不然 水平居中比如容易,垂直居中比较难搞定,水平垂直都居中更不容易。在这个响应式布局的年代,很难固定元素的宽高,俺统计了一下,目前至少有六种方法。本文由浅入深逐...
  • chenmoquan
  • chenmoquan
  • 2014年11月28日 15:56
  • 11283

CSS 如何让li横向在div居中显示

直接上代码,复制一下代码到.text中,修改后缀名为.html,直接运行看效果 如图所示:,同时适用于手机端显示。 .box {     border:1px solid #000000;  ...
  • bodilove
  • bodilove
  • 2016年03月14日 11:12
  • 1769

CSS布局奇葩技巧之--各种居中

居中是我们使用css来布局时常遇到的情况。使用css来进行居中时,有时一个属性就能搞定,有时则需要一定的技巧才能兼容到所有浏览器,本文就居中的一些常用方法做个简单的介绍。 注:本文所讲方法除了特...
  • Lpandeng
  • Lpandeng
  • 2016年12月13日 13:21
  • 224

css实用技巧之设置元素居中

CSS居中一直是一个比较敏感的话题,为了以后开发的方便,楼主觉得确实需要总结一下了,总的来说,居中问题分为垂直居中和水平居中,实际上水平居中是很简单的,但垂直居中的方式和方法就千奇百怪了。 内联元素...
  • donggx
  • donggx
  • 2017年01月06日 14:15
  • 199

CSS让图片垂直居中的几种技巧

在网页设计过程中,有时候会希望图片垂直居中的情况。而且,需要垂直居中的图片的高度也不确定,这就会给页面的布局带来一定的挑战。下面总结了一下,曾经使用过的几种方法来使图片垂直居中,除了第一种方法只限于标...
  • yzbben
  • yzbben
  • 2016年07月14日 01:38
  • 219

CSS布局奇淫技巧之--各种居中

居中是我们使用css来布局时常遇到的情况。使用css来进行居中时,有时一个属性就能搞定,有时则需要一定的技巧才能兼容到所有浏览器,本文就居中的一些常用方法做个简单的介绍。 注:本文所讲方法除了特别说...
  • tanranran
  • tanranran
  • 2013年11月03日 16:09
  • 886

CSS布局奇淫技巧之--各种居中

居中是我们使用css来布局时常遇到的情况。使用css来进行居中时,有时一个属性就能搞定,有时则需要一定的技巧才能兼容到所有浏览器,本文就居中的一些常用方法做个简单的介绍。 注:本文所讲方法除了特别说...
  • HDFQQ188816190
  • HDFQQ188816190
  • 2017年03月21日 15:07
  • 327

CSS布局技巧之--各种居中

居中是我们使用css来布局时常遇到的情况。使用css来进行居中时,有时一个属性就能搞定,有时则需要一定的技巧才能兼容到所有浏览器,本文就居中的一些常用方法做个简单的介绍。 注:本文所讲方法除了特...
  • guodongxixia
  • guodongxixia
  • 2017年06月20日 14:32
  • 267

使用css的绝对定位来控制页面居中的方法之一

直接上代码。。。 1.绝对居中(水平和垂直方向都居中) #main{ /*css只有这种注释方法,不能用双斜线注释,否则会发生你意想不到的问题*/ position:absolut...
  • zgrjkflmkyc
  • zgrjkflmkyc
  • 2015年03月18日 09:43
  • 2835
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS中让页面居中的技巧
举报原因:
原因补充:

(最多只允许输入30个字)