居中学习的笔记

本文为自己总结并学习居中方法一些记录

主要参照的博客原文在这里点击打开链接

1，最常见的 水平居中 margin：0 auto;   实测只对块级元素有效，并且必须设置宽度，也就是说，只有display是block的时候才可以（给img对象的display设置成block也可以），inline-block 和inline都没有效果

脱离文档流的也没有效果，比如说 浮动或者 定位

2，也text-align:center;

这条属性有向下传递性，会不断向子元素传递。 

我对这条属性的理解就是，在一个div里面，div里面的inline或者inline-block元素相对于div居中 ，亲测图片 和div都可以。

3.垂直居中，line-height

1不多说，只要行高和父容器的高度相同，就会相对于父容器垂直居中了。

4.使用表格（对表格不太感兴趣，本段为直接复制）

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

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

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

5，使用display:table-cell来居中（此段也为直接复制）

6,使用绝对定位

适用于已经知道宽高的元素

position: absolute;

    top: 50%;

    left: 50%;

到这里的时候其实不在正中间，此时我们需要把他拉回来，

    margin-top: -50px;

    margin-left: -50px;

写一个负的margin值，值为本身宽度和高度的一半，亲测好用！

也可以用这个方法实现单一的水平或者垂直居中。

7，还是绝对定位，

这个方法其实类似于上个方法的加强版  可以控制宽高是百分比的内部元素

position: absolute;

    top: 0;

    bottom: 0;

    left: 0;

    right: 0;

    margin:auto;

上下写0是控制垂直方向，左右写0是控制水平方向，   最后margin在写个自动，这个方法的前提也是要知道元素的宽和高。

 8，浮动配合相对定位实现居中

这个方法可以不用知道元素的宽和高，也可以控制单一的水平或者垂直方向

原理，真正需要居中的元素需要被外面两层div包起来，

1最外面的div不用定位，中间层的div要设置相对定位，方向写50%；

最后，我们要定位的元素，也就是最里面的元素再设置相对定位，方向也写50%。但是要负值。

表述的不是太好，下面是作者原文

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

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

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

 

注：往回拉的是拉的父级元素本身的一半！！！

看下代码：