水平居中设置-行内元素

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

水平居中设置-定宽块状元素

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

水平居中总结-不定宽块状元素方法

• 加入 table 标签

 {
  display: table;
  margin: 0 auto;
}

• 改变块级元素的display为inline类型（设置为行内元素显示），然后使用text-align:center来实现居中效果
• 通过给父元素设置float，然后给父元素设置position:relative和left:50%，子元素设置 position:relative和left: -50%来实现水平居中。

垂直居中-父元素高度确定的单行文本

• 通过设置父元素的height和line-height高度一致来实现的。(height: 该元素的高度，line-height: 顾名思义，行高（行间距），指在文本中，行与行之间的基线间的距离 )。

垂直居中-父元素高度确定的多行文本

• 使用插入table(包括tbody、tr、td)标签，同时设置 vertical-align：middle。
• 或者采用以下样式

 {
  display: table-cell;
  vertical-align: middle;
}

隐性改变 display 类型

• position : absolute
• float : left 或 float:right
• 只要html代码中出现以上两句之一，元素的display显示类型就会自动变为以 display:inline-block（块状元素）的方式显示，当然就可以设置元素的 width 和 height 了，且默认宽度不占满父元素。