CSS布局的痴迷

中间是我们经常遇到的CSS的使用，当你使用CSS居中时，有时你可以得到一个属性。有时候你需要一些技巧来兼容所有浏览器。本文简要介绍了几种常用的方法。

注：除特别说明，本文中提到的方法与主流浏览器如IE6 +，兼容谷歌，火狐等。

首先，几种简单、无害、无害的居住方式

1。将边距设置为自动

具体来说，中间元素的边距和边距设置为自动。此方法只能是水平居中的，对于浮动元素或绝对定位元素是无效的。

2。使用文本对齐：中心

这是什么也不说，只在图片，按钮，文本和其他元素的线（内联或内联块，等显示）在中间水平。但必须说明在IE6和7两异国情调的浏览器，它可以在任何元素中。

三.使用行高度垂直绘制一行文本。

文本作为文本父级的行高的高度仅适用于一行文本。

4。使用表单

如果你正在使用一个表，它是不需要担心的所有问题，只要TD的使用（也可以使用TH）对齐=中心和垂直对齐方式为中间这两个属性可以在问题中完善的水平和垂直的内容元素，并表将垂直中心内的默认内容。如果你想控制中间目录中的CSS，垂直对齐：中间可垂直，水平，似乎没有对应的CSS属性，但在IE6的7，我们可以使用文本对齐：中心开展在浏览器的形式要素，如Firefox、谷歌IE8 +和文本对齐：中心只对无效块元素内部的元素的作用。
在IE6和7的CSS文本褐藻胶可用于控制表中内容的水平方向的对齐方式，这是有效的内容是否是内部元素或块体单元。
但文本对齐：在IE8和Chrome，Firefox等浏览器无效的块元素，使用对齐的表格属性。

5。使用显示：表单元格停留在中间

对于那些不表格式的元素，我们可以通过显示表单元格来模拟它，这样我们就可以利用表的便利性：
然而，这种方法只能用在IE8 +、谷歌、火狐等浏览器，和IE6和IE7是无效的。

说的很基础，自然不能叫奇巧，下面是一些需要用一些技巧为中心的方法。

6。使用绝对定位来生活在中间。

此方法只适用于我们知道它们的宽度或高度的元素。

绝对定位的中心是这个绝对定位元素左边或顶部的特性的原理是设置为50%，这一次不是元素的中心，但不是正确的位置或离开的距离的宽度或高度的部分元素中的一半，所以你需要使用负价值的左边界或边缘上拉回来的中心位置，从半宽度或高度的元素边缘负价值。
手术效果：
如果你只想达到中间的一个方向，你可以只使用左边的，左边的空白来达到水平的中心，并使用顶部，边距顶部来实现垂直居中。

7，另一种利用绝对定位来保持中间位置的方法。

这个方法也适用于那些我们已经知道它们的宽度或高度的元素。不幸的是，它仅支持IE9 +、谷歌、火狐等浏览器，符合W3C标准。

这里有一段代码来理解这个方法：
手术效果：
如果我们没有定义元素的宽度和高度，那么宽度将由左右的值来决定。高度将取决于顶部和底部的值，因此我们必须设置元素的高度和宽度。同时，如果改变左、右、上、下的值，元素也可以将元素移动到某一方向，您可以自己尝试。

8。运用浮动协调的相对定位进行中间层次

这个方法也解决了浮动元素在中间的问题，我们不需要知道中间元素的宽度。

其原理是：在浮动元素的相对定位中心的50%位父元素的宽度，但这一次不是元素的中心，但位置的一半以上的宽度，那么你需要他与子元素的相对定位，超过一半的自己拉宽，但由于相对定位是相对于自己的位置，所以在左边或右边的设置为50%的一半长，其宽度可以得到的，所以不知道自己的实际宽度是多少。

使用浮动匹配来定位中心的优点是它不需要知道中间元素的宽度，即使宽度是不断变化的。缺点是需要一个冗余元素来包装中间的元素。

看代码：
手术效果：
9。使用字体大小来实现垂直居中

如果已知父元素的高度，则它中的子元素应该是水平的和垂直居中的。可以使用此方法，并且不需要知道子元素的宽度或高度。

这种方法只适用于IE6和IE7。

这种方法的关键是为父元素设置适当的字体大小值。该值是父元素除以1.14获得的值的值，子元素必须是内联或内联块元素，需要添加垂直对齐：中间属性。

至于为什么它除以1.14而不是另一个，这是真的，没有人知道，你只需要记住1.14个数。
方法5，据说在IE8，火狐，谷歌等，显示：表细胞可用于中心的浏览器。字体大小的方法适用于IE6和IE7，那么这两种方法的结合，可以兼容所有浏览器。
在上面的例子中，因为中间元素是一个块元素，我们也需要把它转换成行中的元素。如果中间元素是行内元素，如图片，则可以省略此步骤。

此外，如果垂直对齐：中间是写在父元素中而不是子元素中，那么它也是可能的。在计算字体大小时所使用的值只有1.14左右，约为1.5。

以上是一些常用的住宿方法，如有遗漏或错误，请改正，希望对您的学习有所帮助，希望您多多支持。