CSS居中（包括水平居中和垂直居中）

CSS居中（包括水平居中和垂直居中）

内联元素居中方案

水平居中设置：
1.行内元素

• 设置 text-align:center；

2.Flex布局

• 设置display:flex;justify-content:center;(灵活运用,支持Chroime，Firefox，IE9+)

垂直居中设置：
1.父元素高度确定的单行文本（内联元素）

• 设置 height = line-height；

2.父元素高度确定的多行文本（内联元素）

• a:插入 table （插入方法和水平居中一样），然后设置 vertical-align:middle；
• b:先设置 display:table-cell 再设置 vertical-align:middle；
  

  块级元素居中方案

  水平居中设置：
  1.定宽块状元素

• 设置 左右 margin 值为 auto；

2.不定宽块状元素

• a:在元素外加入 table 标签（完整的，包括 table、tbody、tr、td），该元素写在 td 内，然后设置 margin 的值为 auto；
• b:给该元素设置 displa:inine 方法；
• c:父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left:50%；

垂直居中设置：

• 使用position:absolute（fixed）,设置left、top、margin-left、margin-top的属性;
• 利用position:fixed（absolute）属性，margin:auto这个必须不要忘记了;
• 利用display:table-cell属性使内容垂直居中;
• 使用css3的新属性transform:translate(x,y)属性;
• 使用:before元素;

来源：  http://web.jobbole.com/88041/