本文为自己总结并学习居中方法一些记录
主要参照的博客原文在这里点击打开链接
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%就可以得到了,因而不用知道自身的实际宽度是多少。
这种使用浮动配合相对定位来居中的方法,优点是不用知道要居中的元素的宽度,即使这个宽度是不断变化的也行;缺点是需要一个多余的元素来包裹要居中的元素。
注:往回拉的是拉的父级元素本身的一半!!!
看下代码: