水平居中和垂直居中

一、水平居中

（1）、水平居中-行内元素

    如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。

（2）、水平居中-块级元素

    当被设置元素为 块状元素 时用 text-align：center 就不起作用了，这时也分两种情况：定宽块状元素和不定宽块状元素。

    1、设置了宽度的块状元素（定宽块状元素）

    可以直接设置margin:0 auto;来使盒子对于父元素水平居中。

   2、没有设置宽度的块状元素（不定宽块状元素）

    2.1用table标签包裹

        利用table标签的长度自适应性---即不定义其长度也不默认父元素body的长度（table其长度根据其内文本长度决定）

        第一步：为需要设置的居中的元素外面加入一个 table 标签 ( 包括 、 )。

        第二步：为这个 table 设置“左右 margin 居中”（这个和定宽块状元素的方法一样）。

    注意点：添加了无意义的标签

·

    2.2、改变块级元素的 display 为 inline-block 类型

        将元素变成行内块级元素，可以通过给父元素设置text-align:center;来让元素居中显示。

        注意点：这种做法会影响其父元素里面的其他子行内元素的的位置。

    2.3、设置浮动和相对定位来实现

        通过给父元素设置float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。

        注意点：需要给要水平居中的盒子加一个新的父盒子，这就添加了无意义的html元素。

二、垂直居中

1、垂直居中-父元素高度确定的多行文本（方法一）

    使用 table  (包括tbody、tr、td)标签包裹需要垂直居中的元素。其中 td 标签默认情况下就默认设置了 vertical-align 为 middle。元素会在表格内垂直居中。

2、垂直居中-父元素高度确定的多行文本（方法二）

    设置父元素的 display 为 table-cell（设置为表格单元显示）和vertical-align：middle;属性

    注意点：这种方法的好处是不用添加多余的无意义的标签，但缺点也很明显，它的兼容性不是很好，不兼容 IE6、7而且这样修改display的block变成了table-cell，破坏了原有的块状元素的性质。