---恢复内容开始---
首先，我们在了解如何通过css了解元素水平和垂直居中之前，先要了解下html都有哪些元素，这些元素与偶有哪些分类，因为不同类别的元素的水平垂直居中方法是完全不同的，究其根本当然是因为不同类别元素的性质不同。所以我们先来了解下html的元素类别。
一、HTML元素分类
1）内联（inline)元素：
<a>--锚点
<abbr>--缩写
<acronym>--首字母缩写(HTML5不支持，请使用<abbr>代替）
<b>--粗体（不推荐）
<bdo>--可覆盖文本默认方向
<big>--大字体（HTML5不支持，用CSS代替)
<br>--换行
<cite>--引用
<code>--计算机代码
<dfn>--定义字段
<font>--字体设定（不推荐）
<em>--强调（表现也为斜体，有语义）
<i>--斜体(无语义）
<img>--图片
<input>--输入框
<kbd>--定义键盘文（已废除，不推荐）
<label>--表格标签
<q>--短引用
<s>--中划线（不推荐）
<samp>--定义返利计算机代码
<select>--项目选择（下拉选择框）
<small>--小字体文本
<span>--常用内联容器，定义文本内区块
<strike>--删除线（用<del>代替）
<strong>--粗体强调
<sub>--下标
<sup>--上标
<textarea>--多行文本输入框
<tt>--电传文本（HTML5不支持）
<u>--下划线（不推荐）
<var>--定义变量
2）块状（block）元素：
<address>--地址
<blockquote>--块引用
<center>--居中对齐块（HTML5不支持，用CSS代替）
<dir>--目录列表
<div>--常用块级元素
<dl>--定义列表
<fieldset>--可将表单一部分内容打包（form)
<form>--交互表单
<h1>...<h6>--标题
<hr>--水平分隔线
<isindex>-input prompt
<menu>--菜单列表
noframes-frames--可选内容（对于不支持frame的浏览器显示此区块内容）
<noscript>---可选脚本内容（对于不支持script的浏览器显示此区块内容）
<ol>--排序列表
<p>--段落
<pre>--格式化文本（常用语粘贴代码）
<table>--表格
<ul>--非排序列表
3）可变元素（即可根据上下文语境决定活该元素为块状或内联元素）
applet - java applet
<button>--按钮
<del>--删除文本
<iframe>-inline-frame--一些浏览器不支持frame，则可使用这个标签使其展现
<ins>--插入的文本
<map>--图片区块
<object>--object对象
<script>--客户端脚本
区别：1）块级元素单独占一行，其宽度自动填满其父元素的宽度；行内元素不会单独占一行，相邻元素排列在同一行，除非一行排不下，会自动换到下一行，其宽度随内容
变化而变化
2）块级元素可设置width,height,margin,padding属性；内联元素设置width,height无效，水平方向的padding-left,padding-right,margin-left,margin-right
都产生边距效果，但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。（水平方向有效，竖直方向无效）
二、利用CSS实现元素水平居中
1）行内元素（被设元素为文本、图片等元素时）：给父元素设置text-align:center;
2)定宽块状元素：左右margin设为auto,eg:margin:0 auto;
3)不定宽块状元素
- 为需设置举重元素外面加一个table标签（包括<tbody>\<tr>\<td>);为table设置左右margin值为auto
- 改变块状元素的display伪inline-block类型，然后使用text-align:center来实现居中
- 给父元素设置float，然后给父元素设置position:relative和left:50%,子元素设置position:relative和left:-50%来实现水平居中。
---恢复内容结束---
首先，我们在了解如何通过css了解元素水平和垂直居中之前，先要了解下html都有哪些元素，这些元素与偶有哪些分类，因为不同类别的元素的水平垂直居中方法是完全不同的，究其根本当然是因为不同类别元素的性质不同。所以我们先来了解下html的元素类别。
一、HTML元素分类
1）内联（inline)元素：
<a>--锚点
<abbr>--缩写
<acronym>--首字母缩写(HTML5不支持，请使用<abbr>代替）
<b>--粗体（不推荐）
<bdo>--可覆盖文本默认方向
<big>--大字体（HTML5不支持，用CSS代替)
<br>--换行
<cite>--引用
<code>--计算机代码
<dfn>--定义字段
<font>--字体设定（不推荐）
<em>--强调（表现也为斜体，有语义）
<i>--斜体(无语义）
<img>--图片
<input>--输入框
<kbd>--定义键盘文（已废除，不推荐）
<label>--表格标签
<q>--短引用
<s>--中划线（不推荐）
<samp>--定义返利计算机代码
<select>--项目选择（下拉选择框）
<small>--小字体文本
<span>--常用内联容器，定义文本内区块
<strike>--删除线（用<del>代替）
<strong>--粗体强调
<sub>--下标
<sup>--上标
<textarea>--多行文本输入框
<tt>--电传文本（HTML5不支持）
<u>--下划线（不推荐）
<var>--定义变量
2）块状（block）元素：
<address>--地址
<blockquote>--块引用
<center>--居中对齐块（HTML5不支持，用CSS代替）
<dir>--目录列表
<div>--常用块级元素
<dl>--定义列表
<fieldset>--可将表单一部分内容打包（form)
<form>--交互表单
<h1>...<h6>--标题
<hr>--水平分隔线
<isindex>-input prompt
<menu>--菜单列表
noframes-frames--可选内容（对于不支持frame的浏览器显示此区块内容）
<noscript>---可选脚本内容（对于不支持script的浏览器显示此区块内容）
<ol>--排序列表
<p>--段落
<pre>--格式化文本（常用语粘贴代码）
<table>--表格
<ul>--非排序列表
3）可变元素（即可根据上下文语境决定活该元素为块状或内联元素）
applet - java applet
<button>--按钮
<del>--删除文本
<iframe>-inline-frame--一些浏览器不支持frame，则可使用这个标签使其展现
<ins>--插入的文本
<map>--图片区块
<object>--object对象
<script>--客户端脚本
区别：1）块级元素单独占一行，其宽度自动填满其父元素的宽度；行内元素不会单独占一行，相邻元素排列在同一行，除非一行排不下，会自动换到下一行，其宽度随内容
变化而变化
2）块级元素可设置width,height,margin,padding属性；内联元素设置width,height无效，水平方向的padding-left,padding-right,margin-left,margin-right
都产生边距效果，但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。（水平方向有效，竖直方向无效）
二、利用CSS实现元素水平居中
1）行内元素（被设元素为文本、图片等元素时）：给父元素设置text-align:center;
2)定宽块状元素：左右margin设为auto,eg:margin:0 auto;
3)不定宽块状元素
- 为需设置举重元素外面加一个table标签（包括<tbody>\<tr>\<td>);为table设置左右margin值为auto
- 改变块状元素的display伪inline-block类型，然后使用text-align:center来实现居中
- 给父元素设置float，然后给父元素设置position:relative和left:50%,子元素设置position:relative和left:-50%来实现水平居中。
三、利用CSS实现元素垂直居中
1）已知元素的具体尺寸（eg：width:400px; height:200px;)
#center{
width:400px;
height:200px;
background-color:#ccc;
position:absolute;
left:50%;
top:50%;
margin-top:-100px;
margin-left:-200px;
}
2)可不知道元素具体尺寸 IE9(-ms-), IE10+以及其他现代浏览器才支持。中国盛行的IE8浏览器被忽略是有
些不适宜的（手机web开发可忽略）。
CSS3 transform代替margin translate的便宜百分比值是针对自身大小的
#center{
width:400px;
height:200px;
background-color:#ccc;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
3）#center{
width:400px;
height:200px;
background-color:#ccc;
margin:auto;
position:absolute;
left:0;
top:0;
bottom:0;
right:0;
}