1. 云栖社区>
  2. 技术文集>
  3. 列表>
  4. 正文

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

作者:用户 来源:互联网 时间:2016-03-11 13:42:50

表格方法居中定位元素css元素水平居中css浮动居中宽度布局居中方法水平css_fixed居中

CSS布局奇淫技巧之--各种居中 - 摘要: 本文讲的是CSS布局奇淫技巧之--各种居中, 居中是我们使用css来布局时常遇到的情况。使用css来进行居中时,有时一个属性就能搞定,有时则需要一定的技巧才能兼容到所有浏览器,本文就居中的一些常用方法

居中是我们使用css来布局时常遇到的情况。使用css来进行居中时,有时一个属性就能搞定,有时则需要一定的技巧才能兼容到所有浏览器,本文就居中的一些常用方法做个简单的介绍。

注:本文所讲方法除了特别说明外,都是兼容IE6+、谷歌、火狐等主流浏览器的。

先来说几种简单的、人畜无害的居中方法

1. 把margin设为auto

具体来说就是把要居中的元素的margin-left和margin-right都设为auto,此方法只能进行水平的居中,且对浮动元素或绝对定位元素无效。

2、使用 text-align:center

这个没什么好说的,只能对图片,按钮,文字等行内元素(display为inline或inline-block等)进行水平居中。但要说明的是在IE6、7这两个奇葩的浏览器中,它是能对任何元素进行水平居中的。

3、使用line-height让单行的文字垂直居中

把文字的line-height设为文字父容器的高度,适用于只有一行文字的情况。

4、使用表格

如 果你使用的是表格的话,那完全不用为各种居中问题而烦恼了,只要用到 td(也可能会用到 th)元素的 align="center" 以及 valign="middle" 这两个属性就可以完美的处理它里面内容的水平和垂直居中问题了,而且表格默认的就会对它里面的内容进行垂直居中。如果想在css中控制表格内容的居中,垂 直居中可以使用 vertical-align:middle,至于水平居中,貌似css中是没有相对应的属性的,但是在IE6、7中我们可以使用text- align:center来对表格里的元素进行水平居中,IE8+以及谷歌、火狐等浏览器的text-align:center只对行内元素起作用,对块 状元素无效。

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

CSS布局奇淫技巧之--各种居中-css布局垂直水平居中

在ie6、7中可以通过css的text-algin来控制表格内容的水平方向的对齐,无论内容是行内元素还是块状元素都有效。

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

但在ie8+以及chrome、firefox等浏览器中的text-align:center对块状元素无效,只能用表格自有的align属性。

5、使用display:table-cell来居中

对于那些不是表格的元素,我们可以通过display:table-cell 来把它模拟成一个表格单元格,这样就可以利用表格那很方便的居中特性了。例如:

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

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

但是,这种方法只能在IE8+、谷歌、火狐等浏览器上使用,IE6、IE7都无效。

那面所说的都是很基础的方法,自然不能称之为奇淫巧计,下面就来说一些需要使用一些技巧的居中方法。

6、使用绝对定位来进行居中

此法只适用于那些我们已经知道它们的宽度或高度的元素。

绝 对定位进行居中的原理是通过把这个绝对定位元素的left或top的属性设为50%,这个时候元素并不是居中的,而是比居中的位置向右或向左偏了这个元素 宽度或高度的一半的距离,所以需要使用一个负的margin-left或margin-top的值来把它拉回到居中的位置,这个负的margin值就取元 素宽度或高度的一半。

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

运行效果:

CSS布局奇淫技巧之--各种居中-css布局垂直水平居中

如果只想实现一个方向的居中,则可以只使用left , margin-left 来实现水平居中,使用top , margin-top来实现垂直居中。

7、另一种使用绝对定位来居中的方法

此法同样只适用于那些我们已经知道它们的宽度或高度的元素,并且遗憾的是它只支持IE9+,谷歌,火狐等符合w3c标准的现代浏览器。

下面用一段代码来了解这种方法:

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

运行效果:

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

这 里如果不定义元素的宽和高的话,那么他的宽就会由left,right的值来决定,高会由top,bottom的值来决定,所以必须要设置元素的高和宽。 同时如果改变left,right , top , bottom的值还能让元素向某个方向偏移,大家可以自己去尝试。

8、使用浮动配合相对定位来进行水平居中

此方法也是关于浮动元素怎么水平居中的解决方法,并且我们不需要知道需要居中的元素的宽度。

浮 动居中的原理是:把浮动元素相对定位到父元素宽度50%的地方,但这个时候元素还不是居中的,而是比居中的那个位置多出了自身一半的宽度,这时就需要他里 面的子元素再用一个相对定位,把那多出的自身一半的宽度拉回来,而因为相对定位正是相对于自身来定位的,所以自身一半的宽度只要把left 或 right 设为50%就可以得到了,因而不用知道自身的实际宽度是多少。

这种使用浮动配合相对定位来居中的方法,优点是不用知道要居中的元素的宽度,即使这个宽度是不断变化的也行;缺点是需要一个多余的元素来包裹要居中的元素。

看下代码:

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

运行效果:

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

9、利用font-size来实现垂直居中

如果父元素高度是已知的,要把它里面的子元素进行水平垂直居中,则可以使用这种方法,且子元素的宽度或高度都不必知道。

该方法只对IE6和IE7有效。

该方法的要点是给父元素设一个合适的font-size的值,这个值的取值为该父元素的高度除以1.14得到的值,并且子元素必须 是一个inline或inline-block元素,需要加上vertical-align:middle属性。

至于为什么是除以1.14而不是其他的数,还真没有人知道,你只需要记住1.14这个数就行了。

CSS布局奇淫技巧之--各种居中-css布局垂直水平居中

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

在方法5中说过在IE8+、火狐谷歌等现在浏览器中可以用display:table-cell来进行居中,而这里的font-size的方法则适用于IE6和IE7,所以把这两种方法结合起来就能兼容所有浏览器了:

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

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

上面的例子中因为要居中的元素是一个块状元素,所以我们还需要把他变成行内元素,如果要居中的元素是图片等行内元素,则可以省略此步。

另外,如果 vertical-align:middle 是写在父元素中而不是子元素中,这样也是可以的,只不过计算font-size时使用的  1.14 这个 数值要变成大约 1.5 这个值。



以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有 的相关内容,欢迎继续使用右上角搜索按钮进行搜索表格 , 方法 , 居中 , 定位 , 元素 , css元素水平居中 , css浮动居中 , 宽度 , 布局居中方法 , 水平 css_fixed居中 css 布局居中、css布局垂直水平居中、flex布局垂直居中、线性布局居中、相对布局居中,以便于您获取更多的相关知识。

html-CSS关于div布局的小问题,请教了,谢谢

问题描述 CSS关于div布局的小问题,请教了,谢谢 <head> <style> .ABC{width:100px; height:100px; background:red; margin:auto; margin-left:20px;} </style> </head> <body> <div class="ABC"></div&g...

CSS中position属性之fixed实现div居中_javascript技巧

position 属性规定元素的定位类型。这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移...

CSS3输出PDF打印的小技巧

...d和tfoot的重复渲染特性来实现。 所以,我们又回到了table布局的年代: 页头 明细 页脚 就这样,你只要将具体内容,放入delivery-tbody中即可完成整个需求,很简单,对不对。

ruby on rails面试经验

...torial,web开发敏捷之道,等等)CSS方面(CSS盒子模型,CSS布局定位,各种居中对齐,等等)javascript(this,闭包等等) 2,经验方面写好简历(这个不多说了)把中意的公司留在后面   列出已经投递简历的公司,然后根据自己喜...

12个实用的 Javascript 奇淫技巧

JavaScript自1995年诞生以来已过去了16个年头,如今全世界无数的网页在依靠她完成各种关键任务,JavaScript曾在Tiobe发布的编程语言排行榜中排到了第8名,紧随C#,JavaScript从过去装饰性的一种脚本语言转变为主流的编程语言,人们...

前三篇
后三篇
弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率

40+云计算产品,6个月免费体验

稳定可靠、可弹性伸缩的在线数据库服务,全球最受欢迎的开源数据库之一

云服务器9.9元/月,大学必备