水平居中和垂直居中

水平居中

一、水平居中行内元素

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

二、水平居中定宽块状元素

满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的

三、水平居中不定宽块状元素

不定宽度的块状元素有三种方法居中（这三种方法目前使用的都比多）：

1. 加入 table 标签
2. 设置 display：inline 方法
3. 设置 position:relative 和 left:50%

第一种：添加 table 标签

第一步：为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td> )。
第二步：为这个 table 设置“左右 margin 居中”（这个和定宽块状元素的方法一样）。

第二种：设置 display：inline 方法

改变块级元素的 display 为 inline 类型，然后使用 text-align:center 来实现居中效果

第三种：设置 position:relative 和 left:50%

通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left:-50% 来实现水平居中。
原理：
父元素position:relative;left:50%浮动起来后相对浏览器左边框移动到水平正中央；这时候父元素的左边界就相当于中轴；这时候子元素position:relative;left:-50%;向左移动自己宽度的50%，这样子元素就正好剧居中

垂直居中

父元素高度确定的单行文本

父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的

父元素高度确定的多行文本（方法一）

方法一：使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle

父元素高度确定的多行文本（方法二）

在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell，激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式