css绝对定位后居中显示文字

在图片底部居中显示文字，直接上代码：

<style>    .main {        width:300px;        height:200px;        text-align:center;    }    .title {        position:absolute;        width:300px;        height:20px;        left: 0;        right: 0;        bottom: 0;        background-color:rgba(0,0,0,0.5);    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000);    }    #设置背景半透明并兼容ie浏览器</style><div class="main">    <img src="1.png" />    <p class="title">我要在图片底部居中显示</p>    </div>

效果如图