css布局居中总汇小笔记

css布局居中总汇小笔记

居中 是我们在css布局中经常遇到的，今天我把我的css居中做了个小汇总~当做我的小笔记....

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

开始，先把基本的属性罗列一下，再记录一些技巧性的居中~~

1   text-align:center

  只能对图片，按钮，文字等行内元素或将行内元素或已经给元素设置了display为inline或inline-block等进行水平居中，但在IE6、7这两个奇葩的浏览器中，它能对任何元素进行水平居中

2  margin：auto

就是把要居中的元素的margin-left和margin-right都设为auto,只能实现水平上的居中，不能实现垂直方向的居中，而且，对绝对定位和浮动的元素无效

3  line-height：;

   让单行的文字垂直居中，配合父容器的高度使用

父容器的高度和line-height高度一致，可以设置单行文本居中，若多行文本居中，要算好多行文本的line-height与父容器的高度了

4使用表格

  表格默认的就会对它里面的内容进行垂直居中 使用属性 align="center"实现水平居中，垂直居中valign=”middle”属性

5 display:table-cell

对于那些不是表格的元素，我们可以通过display:table-cell 来把它模拟成一个表格单元格，

介绍完基本的属性，下面说些技巧性的居中方式：

1 运用定位小技巧居中：

前提：元素要有宽高

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

2 运用定位实现居中第二招

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

3 使用平移和定位实现居中

此方法可以不知道元素的宽高 推荐使用

  用绝对定位再配合上transform：translate（-50%，-50%） 然后再加上margin-left 和margin-top ：50%  拉回translate平移出去的

有更多的居中后续继续补进笔记中........