父元素为自适应图片，子元素为文字，CSS如何设置在父元素内上下左右居中？

父元素为自适应图片，子元素为文字，如何设置在父元素内上下左右居中？

最后用table完美解决了兼容性到IE6 哈哈贴上代码

额这里编辑怎么显示代码输入贴上代码自动转译了

第一种：子元素line-height高度为父元素高度
第二种：父元素display:table和子元素table-cell
第三种：子元素绝对定位然后margin:auto
第四种：flex
第五种：父元素设置 display: -webkit-box; -webkit-box-pack: center; box-pack: center; -webkit-box-align: center; box-align: center;
第六种：inline-block vertical-align middle

拿去玩,说爱我

<html>
<head>
    <style>
        ul,li{
            display: block;
            width:20rem;
            height:10rem;
            list-style:none;
            padding:0;
            margin:0;
            text-indent: 0;
        }
        ul{
            width:100%;
        }
        li{
            padding:1rem;
            float:left;
        }
        a{
            display: block;
            position: relative;
            text-decoration:none;
        }
        a img{
            border:0;
            display: block;
            width:100%;
            height:100%;
        }
        a span{
            font-size:1rem;
            color:white;
            display: block;
            height:10rem;
            overflow: hidden;
            position: absolute;
            top:0;
            left:0;
            width:100%;
        }
        span.left{
            text-align: left;
        }
        span.center{
            text-align:center;
        }
        span.right{
            text-align:right;
        }
        span.top{
            line-height:1rem;
        }
        span.middle{
            line-height:10rem;
        }
        span.bottom{
            line-height:18rem;
        }
    </style>
</head>
<body>
    <ul>
        <li>
            <a href="">
                <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTH4dKJwvNJE3nwwStezaK5dyhLolRU1vfX5HVumiFBBwVqZfZ9We4ZqnyR" alt="">
                <span class="bottom center">This is Paris</span>
            </a>
        </li>
        <li>
            <a href="">
                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSbS3oRIl7VuAd_hVTTcaIG1stAXQEs_VMnx_2WkG-Gg5LR7ZeXeg" alt="">
                <span class="top left">This is Paris</span>
            </a>
        </li>
        <li>
            <a href="">
                <img src="http://static.travel.usnews.com/images/destinations/86/paris_edited_445x280.jpg" alt="">
                <span class="middle right">This is Paris</span>
            </a>
        </li>
    </ul>
</body>
</html>

【热门文章】