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

情况一：文字居中



用到属性：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);
}