div+css实现水平居中、垂直居中和水平垂直居中

盒子模型布局（div+css）

本次记录html里元素布局的实现，即使用css实现元素的水平居中、垂直居中、水平垂直居中。

在此之前先记录一下，块级元素、行级（内联）元素、内联块元素这三个概念。接下来就依次作简单介绍。

1.块级元素（display:block）

其特性有：

• 元素独占一行，其自己另起一行开始，并且其后元素也另一起一行开始。
• 元素高度（height）、宽度（width）、行高（line-height）、内边距（padding）、外边距（margin）均可设置。
• 元素占据其父元素的整个容器，也就是说块级元素的宽度和父元素的宽度是一样的，其占满了父元素，所以其后元素只能另起一行。
• 可以容纳内联元素以及其他块级元素。

块级元素主要有：

<address></address> , <blockquote></blockquote> ，<center></center> , <dir></dir> , <div></div> , <dl></dl> , <fieldset></fieldset> , <form></form> , <h1></h1> , <h2></h2> , <h3></h3> , <h4></h4> , <h5></h5> , <h6></h6> , <hr> , <isindex></isindex> , <menu></menu> , <noframes></noframes> , <noscript></noscript> , <ol></ol> , <p></p> , <pre></pre> , <table></table> , <ul></ul> , <li></li>

demo演示：

 <!--
	div为块级元素，默认display:block，
	设置父级元素宽高，块级元素子元素会继承其父元素的宽度，所以两个子元素都是新起一行开始。
 -->
<div style="width: 100px;height: 100px;background-color: #fff;">  
    <div style="height:50px;background-color: blue;"></div>
    <address style="height:60px;background-color: red;"></address>
</div>

2.行级（内联）元素（display:inline）

其特性有：

• 和其他同级行级元素排列在同一行。
• 元素高度（height）、宽度（width）、垂直方向的内边距（padding-top/padding-bottom）、外边距（margin-top/margin-bottom）不可设置。但可以设置行高（line-height）、水平方向外边距（margin-left/margin-right）以及内边距（padding）
• 行级元素只能容纳文本或者其他行级元素，行级元素的宽度取决于其内容的宽度，其内容一般是文本或者图像。

行级元素主要有：

<a></a> , <abbr></abbr> , <acronym></acronym> , <b></b> , <bdo></bdo> , <big></big> , <br> , <cite></cite> , <code></code> , <dfn></dfn> , <em></em> , <font></font> , <i>