CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
css设置图片和文字垂直居中的方法：
文本的垂直居中：
单行文本
只要height值等于line-height值就
#father{
width:300px;
height:200px;
background-color:skyblue;
line-height:200px;
}
#son{
background-color:green;
}
我是文本
效果如下：
height === line-height 无法使替换元素，如、、、…垂直居中，必须有、…类似行内标签配合才能使垂直居中生效！
多行文本
1：高度固定
关键属性：display:tabel-cell; vertical-align:middle;
div{
height:200px;
width:300px;
vertical-align:middle;
display:table-cell;
word-break:break-all;
background:skyblue;
}
红豆生南国，春来发几支。愿君多采撷，此物最相思。
效果如下：
2：父级高度固定，嵌套行内元素
关键属性：父级:diaplay:tabel; 子集：display:tabel-cell; vertical-align:middle;
div{
height:200px;
width:300px;
display:table;
word-break:break-all;
background:skyblue;
}
span{
display:table-cell;
vertical-align:middle;
}
红豆生南国，春来发几支。愿君多采撷，此物最相思。
效果如下：
3：父级高度固定，嵌套块级元素且该元素高确定
关键属性：定位 + margin-top：负值；
*{
margin:0;
padding:0;
}
div{
height:200px;
width:300px;
position:relative;
word-break:break-all;
background:skyblue;
}
p{
position:absolute;
top:50%;
left:0;
height:80px;
margin-top:-40px;
background:red;
}
红豆生南国，春来发几支。愿君多采撷，此物最相思。
效果如下：
二、图片垂直居中水平居中：
1、img父级display:table-cell; vertical:middle; height:xxx; (推荐)
div{
display: table-cell;
width:300px;
height:200px;
vertical-align: middle;
/*text-align:去掉则垂直不水平*/
text-align:center;
background:skyblue; /*table-cell 可以使替换元素垂直居中，强大！*/
}
img{
width:100px;
height:100px;
}
效果如下：
2、定位 + margin：auto；
div{
position:relative;
width:400px;
height:300px;
text-align:center;
background:#999;
}
img{
position:absolute;
top:0;bottom:0;
left:0;right:0;
margin:auto;
}
