实现文本内容不固定时垂直水平居中

1.主要是添加一个空标签 <span class="hook"></span>在需要对齐的<div class="cover_text">文本文本文本</div>前面：
<div class="cover_text_box">
<span class="hook"></span>
<div class="cover_text">文本文本文本</div>
</div>

<ul class="wrap_box_ul">
        <li class="goods_list_item">
            <div class="top_div cover_div">
                <img src="big/MD96127-10-5_20171201200015799.png?x-oss-process=image/resize,h_200,w_200" alt="" class="prcImg">
            </div>
            <div class="bottom_div">
                <p>文本内容文本内容文本内容文本内容</p>
                <p>文本内容文本内容</p>
                <p>文本内容文本内容</p>
                <p>文本内容文本内容</p>
                <p>文本内容文本内容</p>
                <p>文本内容文本内容</p>
            </div>
            <div class="cover_text_box">
                <span class="hook"></span>
                <div class="cover_text">工厂已取消该产品的可售工厂已取消该产品的可售工厂已取消该产品的可售工厂已取消该产品的可售售工厂已取消该产品的可售工厂已取消该产品的可售</div>
            </div>
        </li>

2.父级最关键的css:
overflow:hidden;
font-size:0;
letter-spacing:0;
.hook {
display: inline-block;
width: 0;
height: 100%;
overflow: hidden;
line-height: 999em;
font-size: 0;
vertical-align: middle;
*zoom: 1;
*display: inline;
}
同级的div:
display:inline-block;
vertical-align:middle;
max-width:100%;
max-height:100%;
*zoom:1;
*display:inline;
text-align:center;
font-size:14px;//字体大小一定要给，因为父级已经设置为0了。
color:#fff;

css
.wrap_box_ul{
        overflow:hidden;
        .goods_list_item{
            display: block;
            float: left;
            width: 308px;
            height:400px;
            border:1px solid #000;
            background-color:#fff;
            position: relative;
            margin-right: 10px;
            margin-bottom: 10px;
            .top_div{
                width:100%;
                height:240px;//设置高度
                display:block;
                margin:0 auto;
                position: relative; //相对定位
                text-align:center;
                .prcImg{display:inline-block;
                    max-width:100%;
                    max-height:100%;
                    margin:20px auto;
                    vertical-align:middle;
                }
            }
            .bottom_div{
                padding:4px 20px;
            }
            .cover_text_box{
                display:block;
                width:100%;
                height:100%; //高度必须有
                text-align:center;
                background-color:rgba(0,0,0,0.5);
                // filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);
//在页面的头部上加上这一段代码，可以兼容ie9以下的半透明色失效的bug.
<!--[if lt IE 9]>
        <style type="text/css">
        .cover_text_box{
            background:transparent;
            filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000);
            zoom: 1;
        }
        </style>
    <![endif]-->
                position: absolute;
                top: 0;left:0;right:0;z-index: 10;
                margin: 0 auto;
                overflow:hidden;
                font-size:0;
                letter-spacing:0;
                .hook {
                    display: inline-block;
                    width: 0;
                    height: 100%;
                    overflow: hidden;
                    line-height: 999em;
                    font-size: 0;
                    vertical-align: middle;
                    *zoom: 1;
                    *display: inline;
                }
                .cover_text{
                    display:inline-block;
                    vertical-align:middle;
                    max-width:100%;
                    max-height:100%;
                    *zoom:1;
                    *display:inline;
                    text-align:center;
                    font-size:14px;
                    color:#fff;
                    padding:0 20px;
                }
            }
        }
    }