<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片文字，垂直水平居中显示</title>
<style type="text/css">
.picbg{
background-size: contain;display: block;border:1px solid #e3e3e3; 25%;
margin: 0 5%;height:250px;
position: relative;overflow: hidden;float: left;
}
.picbg img{
display:block;
background: red;
margin: 0 auto;
max- 100%;超出宽度的图片限制最大显示宽度
max-height:250px;//超出高度的图片限制最大显示高度
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.picbg .title{
100%;height: 100%;position: absolute;top:0;
text-align: center;
}
.picbg .title>div{
100%;
position: absolute;top:50%;margin-top: -39px;
}
.picbg .title p{
font-size: 26px;color: #6c6c6d;height: 26px;
text-align: center;line-height: 26px;
}
</style>
</head>
<body>
<div class="picbg">
<div class="courseLive"></div>
<img src="img/3.jpg" alt="1" class="center">
<div class="title">
<div><p>城市风格</p></div>
</div>
</div>
<div class="picbg">
<div class="courseLive"></div>
<img src="img/a.png" alt="2" class="center" >
<div class="title">
<div><p>城市风格</p></div>
</div>
</div>
</body>
</html>