css设置图片和文字垂直居中的方法：
文本的垂直居中：
单行文本
只要height值等于line-height值就
<style>
#father{
width:300px;
height:200px;
background-color:skyblue;
line-height:200px;
}
#son{
background-color:green;
}
</style>
<body>
<div id="father">
<span id="son">我是文本</span>
</div>
</body>效果如下：
height === line-height 无法使替换元素，如<img>、<input>、<areatext>、<select>…垂直居中，必须有<a>、<span>…类似行内标签配合才能使垂直居中生效！
多行文本
1：高度固定
关键属性：display:tabel-cell; vertical-align:middle;
<style>
div{
height:200px;
width:300px;
vertical-align:middle;
display:table-cell;
word-break:break-all;
background:skyblue;
}
</style>
<body>
<div id="father">
红豆生南国，春来发几支。愿君多采撷，此物最相思。
</div>
</body>效果如下：
2：父级高度固定，嵌套行内元素
关键属性：父级:diaplay:tabel; 子集：display:tabel-cell; vertical-align:middle;
<style>
div{
height:200px;
width:300px;
display:table;
word-break:break-all;
background:skyblue;
}
span{
display:table-cell;
vertical-align:middle;
}
</style>
<body>
<div>
<span>
红豆生南国，春来发几支。愿君多采撷，此物最相思。
</span>
</div>
</body>效果如下：
3：父级高度固定，嵌套块级元素且该元素高确定
关键属性：定位 + margin-top：负值；
<style type="text/css">
*{
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;
}
</style>
<body>
<div>
<p>
红豆生南国，春来发几支。愿君多采撷，此物最相思。
</p>
</div>
</body>效果如下：
二、图片垂直居中水平居中：
1、img父级display:table-cell; vertical:middle; height:xxx; （推荐）
<style>
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;
}
</style><body>
<div>
<img src="1.jpg-600"/>
</div>
</body>效果如下：
2、定位 + margin：auto；
<style>
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;
}
</style>
<div>
<img src="1.jpg-600" />
</div>
</body效果如下：
推荐：css参考手册
以上就是css如何让图片和文字垂直居中？的详细内容，更多请关注0133技术站其它相关文章！
