布局篇（一）各类元素居中显示

情况一：文字居中

用到属性：text-align和line-height

      <div class="div1">
      	Link
      </div>

		.div1{
			width:800px;
			height: 200px;
			background-color: cornflowerblue;
			text-align: center;
			line-height: 200px;
		}

情况2：图片居中

方法一：
用到属性：外部容器设置text-align使图片水平居中，padding-top控制图片在垂直方向的位置(或者为内部元素添加margin-top)，此方法要计算图片及外部容器的高度。

注：常见的块级元素：body、div、p、h1~h6、ul、form、table

        常见的内联元素：a、span、img、label、input、select、textarea

      <div class="div1">
      	<img src="demopic.png">
      </div>

			.div1{
				width:800px;
				height:200px;
				background-color: cornflowerblue;
				text-align: center;
				overflow:hidden;
			}
			img{
				margin-top:25px;
			}

以下方法均为水平且垂直居中

方法二：

对div1添加line-height:200px（等于外部容器高度），对img设置vertical-align:middle;

方法三：

在img标签前加span标签，并对span和img设置vertical-align:middles使其垂直居中

		<div class="div1">
			<span></span>
			<img src="demopic.png">
		</div>

			.div1{
				width:800px;
				height: 200px;
				background-color: cornflowerblue;
				text-align: center;
				overflow: hidden;
			}
			img{
				vertical-align:middle;
			}
			span{
					height:100%;
					display:inline-block;
					vertical-align:middle;
				}

方法四：

将外部容器的显示模式设置成display:table， img标签外部再嵌套一个span标签，并设置span的显示模式为display:table-cell，这样span内部的内容就相当于表格，可以很方便的使用vertical-align属性来对齐其中的内容了。

		<div class="div1">
			<span><img src="demopic.png"></span>
		</div>

			.div1{
				width:800px;
				height: 200px;
				background-color: cornflowerblue;
				text-align: center;
				display: table;
				overflow: hidden;
			}
			img{
				vertical-align:middle;
				/*span内部也垂直居中*/
			}
			span{
					display:table-cell;
					vertical-align:middle;
				}

多个图片居中：只需在div里添加多个img即可。注：若需去除图片之间的间距可在外部容器中设置font-size:0来兼容chrome和firefox，或者将img与外部容器写在同一行

综合小栗子;

		<div class="top-content">
				<p><img src="images/hp1.png"></p>
			    <p class="middle">江流儿</p>
		</div>

			.top-content {
				width: 100%;
				height: 200px;
				background-image: url("images/backg3.jpg");
				background-size: cover;
				text-align: center;
				padding-top: 13%;
				overflow: hidden;
			}
			img {
				width: 80px;
				height: 80px;
				border-radius: 40px;
				box-shadow: 0 0 10px rgba(62, 99, 114, 0.8);
			}
			.middle {
				font-size: 22px;
				color: rgb(120,120,120);
			}