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

﹏ヽ暗。殇╰゛Y 2022-06-09 02:28 233阅读 0赞

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

[css3 ][css3]

浏览数:297

2017-8-21

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

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

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

## 把margin设为auto ##

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

## 使用 text-align:center ##

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

## 使用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`只对行内元素起作用，对块状元素无效。

![csscenter818-1.png][]  
![csscenter818-2.png][]  
在ie6、7中可以通过`css`的`text-algin`来控制表格内容的水平方向的对齐，无论内容是行内元素还是块状元素都有效。  
![csscenter818-3.png][]

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

## 使用display:table-cell来居中 ##

对于那些不是表格的元素，我们可以通过`display:table-cell` 来把它模拟成一个表格单元格，这样就可以利用表格那很方便的居中特性了。例如：  
![csscenter818-4.png][]  
![csscenter818-5.png][]  
但是，这种方法只能在IE8+、谷歌、火狐等浏览器上使用，IE6、IE7都无效。

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

## 使用绝对定位来进行居中 ##

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

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

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

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

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

下面用一段代码来了解这种方法：  
![csscenter818-8.png][]  
运行效果：  
![csscenter818-9.png][]

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

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

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

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

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

看下代码：  
![csscenter818-10.png][]  
运行效果：  
![csscenter818-11.png][]

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

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

该方法只对IE6和IE7有效。

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

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

![csscenter818-12.png][]  
![csscenter818-13.png][]

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

![csscenter818-14.png][]  
![csscenter818-15.png][]

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

另外，如果 `vertical-align:middle` 是写在父居中是我们使用css来布局时常遇到的情况。使用css来进行居中时，有时一个属性就能搞定，有时则需要一定的技巧才能兼容到所有浏览器，本文就居中的一些常用方法做个简单的介绍。

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

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

## 把margin设为auto ##

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

## 使用 text-align:center ##

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

## 使用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`只对行内元素起作用，对块状元素无效。

![csscenter818-1.png][]  
![csscenter818-2.png][]  
在ie6、7中可以通过`css`的`text-algin`来控制表格内容的水平方向的对齐，无论内容是行内元素还是块状元素都有效。  
![csscenter818-3.png][]

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

## 使用display:table-cell来居中 ##

对于那些不是表格的元素，我们可以通过`display:table-cell` 来把它模拟成一个表格单元格，这样就可以利用表格那很方便的居中特性了。例如：  
![csscenter818-4.png][]  
![csscenter818-5.png][]  
但是，这种方法只能在IE8+、谷歌、火狐等浏览器上使用，IE6、IE7都无效。

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

## 使用绝对定位来进行居中 ##

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

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

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

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

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

下面用一段代码来了解这种方法：  
![csscenter818-8.png][]  
运行效果：  
![csscenter818-9.png][]

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

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

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

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

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

看下代码：  
![csscenter818-10.png][]  
运行效果：  
![csscenter818-11.png][]

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

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

该方法只对IE6和IE7有效。

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

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

![csscenter818-12.png][]  
![csscenter818-13.png][]

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

![csscenter818-14.png][]  
![csscenter818-15.png][]

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

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

以上就是一些常见的居中方法了，如有疏漏或错误之处，敬请指正！

原文地址：[http://www.cnblogs.com/2050/p/3392803.html][http_www.cnblogs.com_2050_p_3392803.html]

。

[css3]: http://www.jqhtml.com/8659.html#
[csscenter818-1.png]: /images/20220609/b674359ce69e42fbb0abda531edcbd84.png
[csscenter818-2.png]: /images/20220609/7d80673027c645e8975630882d31c006.png
[csscenter818-3.png]: /images/20220609/8c1a17470b4d4f0fa1a426374aa69d3f.png
[csscenter818-4.png]: /images/20220609/c3c3b805c3e24780961ceb5832651f72.png
[csscenter818-5.png]: /images/20220609/096d9e69a2904293a8b68cdb4d36ed5d.png
[csscenter818-6.png]: /images/20220609/05d3b126a4954bf185e003ec0a8b554e.png
[csscenter818-7.png]: /images/20220609/c2d0182670584cbc967ebf16fc04951a.png
[csscenter818-8.png]: /images/20220609/d29f452e8c6a47f9af8f03b10f69c22f.png
[csscenter818-9.png]: /images/20220609/f2b3fb1758bb4978913f0c9c7e678dda.png
[csscenter818-10.png]: /images/20220609/743c680da25b4d7c94b27b93b40fdf04.png
[csscenter818-11.png]: /images/20220609/2fff72b35e4244aba7887c81ddf46683.png
[csscenter818-12.png]: /images/20220609/bbecab8ac64947efade5128c6f5f6e58.png
[csscenter818-13.png]: /images/20220609/aad8de11da304da5b9b476622ca298cb.png
[csscenter818-14.png]: /images/20220609/0de4c438cc9b43c2b3a06fc2e1501566.png
[csscenter818-15.png]: /images/20220609/c9f330224820449c85d7355b2ed0b73d.png
[http_www.cnblogs.com_2050_p_3392803.html]: http://www.cnblogs.com/2050/p/3392803.html

发表评论取消回复

表情：

评论列表（有 0 条评论，233人围观）

还没有评论，来说两句吧...

相关阅读

相关 css布局技巧：如何元素居中

如何让一个元素上下左右都居中呢？相信大家在面试的时候也会经常碰到这个问题，一下列出来几种方式以供大家参考，如有不足之处，请大家补充问题描述：给定两个元素，这两个元素

水深无声/ 2024年04月03日 14:11/ 0 赞/ 20 阅读

相关 css布局技巧：元素居中

经常碰到有人在问，如何让一个元素上下左右都居中呢？相信大家在面试的时候也会经常碰到这个问题，一下列出来几种方式以供大家参考，如有不足之处，请大家补充问题描述：给定两

梦里梦外;/ 2024年04月03日 12:53/ 0 赞/ 16 阅读

相关 ToString 奇淫技巧

int和float同样结果 decimal decTemp = 2.1m; Console.WriteLine(decTemp.ToString("0.00"

超、凢脫俗/ 2023年08月17日 17:17/ 0 赞/ 91 阅读

相关 [嵌入式开发技巧]C语言宏配置的各种奇淫技巧

前言在项目中，我们经常会需要针对不同的需求进行不同的配置。在windows/Linux等大平台下，可能会用到配置文件 ini、xml等。而在嵌入式平台下，可能连文件

谁践踏了优雅/ 2023年06月08日 12:59/ 0 赞/ 29 阅读

相关 Sql的奇淫技巧

1. case\_when 对数据分类 SELECT CASE WHEN population < 100 THEN '01' W

旧城等待，/ 2022年12月05日 13:57/ 0 赞/ 213 阅读

相关 CSS布局奇淫技巧之-宽度自适应

css这个东西，说难不难，说容易也不容易。我觉得最重要的还是经验的积累，正所谓的不积硅步，无以至千里。这一系列文章讲述几种css特殊布局的实现，也当作为自己做个备忘吧。首先

淡淡的烟草味﹌/ 2022年07月24日 10:10/ 0 赞/ 197 阅读

相关 CSS布局奇淫技巧之–各种居中

CSS布局奇淫技巧之–各种居中 [css3 ][css3] 浏览数:297 2017-8-21 居中是我们使用css来布局时常遇到的情况。使用css来进行居

﹏ヽ暗。殇╰゛Y/ 2022年06月09日 02:28/ 0 赞/ 234 阅读

相关 Shiro步步为营--奇淫技巧

目录会话管理启用会话管理自定义SessionDAO 会话验证关于缓存记住我认证VS记住我启用记住我 --------------------

偏执的太偏执、/ 2021年12月14日 09:49/ 0 赞/ 264 阅读

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

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

梦里梦外;/ 2021年11月09日 02:01/ 0 赞/ 358 阅读

相关 IDEA奇淫小技巧

IDEA是目前市场上最好用的IDE，我说的！ ![format_png][] 前几年eclipse在市场上非常流行，因此大多数人都习惯了eclipse的一些快捷键。近年来，

墨蓝/ 2021年09月18日 05:22/ 0 赞/ 335 阅读