1、如何让块级元素水平居中？如何让行内元素水平居中？

1. 块级元素使用margin:0 auto;（上下为0，左右auto）
2. 行内元素使用text-align:center;（text-align:center仅作用在块级元素上，所以text-align:center;这个属性应该设置在行内元素的block级父元素上。)

flex布局居中
对父元素设置，子元素即水平居中 justify-content:center，垂直居中align-items:center

parent{
    display:flex;
    justify-content:center;  //主轴方向对齐
    align-items:center;  //侧轴方向对齐
}

2、text-align: center的作用是什么，作用在什么元素上？能让什么元素水平居中？

text-align CSS属性定义行内内容（例如文字）如何相对它的块父元素对齐，text-align并不控制块元素自己的对齐，只控制它的行内内容的对齐。

1. text-align:center的意思是块级元素中的行内内容居中。
2. 作用在block-level元素上(包括了block和inline-block)
3. 能让block-level的元素中的行内元素，替换元素和inline-block元素居中。

3、水平垂直居中有几种实现方式？

1. 绝对定位，负margin自身一半长宽（必须事先指定元素的width和height，否则无法给负margin设值）
   

   负margin自身一半长宽

2. 绝对定位(0需分开写），使用margin:auto居中，必须声明宽高代码范例
   

3. 绝对定位使用translate()位移来替代负margin（和方法1相比不用指定宽高了~），实现将元素拉回页面正中心
   

4. 行内块元素display:inline-block，可使用vertical-align实现垂直居中
   

   inline-block

5. 把div属性设置为单元格display:table-cell实现垂直居中
   

   display:table-cell

6. display:flex 实现垂直水平居中 代码范例
   
   display:flex

flex布局青蛙游戏：http://flexboxfroggy.com/#zh-cn

3、单行文本垂直居中

#child {
line-height: 200px;
}

4、多行文本垂直居中

1.使用表格table-cell

span{
  height:200px;
  display:table-cell;
  vertical-align:middle;
}
td{
  height:200px;
  vertical-align:middle;
}

表格table-cell实现多行文本垂直居中

2.不使用表格

div{
  line-height:200px;
  font-size:0;
}
span{
  font-size:16px;
  display:inline-block;
  line-height:normal;
  vertical-align:middle;
}

多行文本居中

增加font-size会更加居中

5、浮动元素水平居中对齐

1. 对于定宽的非浮动元素我们可以用margin:0 auto进行水平居中

2. 对于不定宽的浮动元素我们也有一个常用的技巧解决它的水平居中问题，如下：

<div class="box">
    <p>我是浮动的</p>
    <p>我也是居中的</p>
</div>

//CSS代码
.box{
    float:left;
    position:relative;
    left:50%;
}
p{
    float:left;
    position:relative;
    right:50%;
}