图片、文字、块的垂直居中显示问题-CSDN博客

面试的时候遇到了这个问题，就进行了总结。
<!--第一种方法，内部div已知宽高，ie8及以上都支持-->
    <div style="position:relative; width:500px;height:500px;background:green;">
        <div style="width:300px;height:100px;/*必须有*/margin: auto;position: absolute;top: 0; left: 0; bottom: 0; right: 0;border:solid red 1px;">这是垂直更新这是垂直更新</div>
    </div>
    <br>
    <div style="position:relative; width:500px;height:500px;background:green;">
        <div style="width:300px;height:100px;position:absolute;top: 50%;margin-top:-50px; left: 50%;margin-left:-150px;border:solid red 1px;">这是垂直水平居中垂直水平居中</div>
    </div>
    <br>


    <!--第二种方法，内部div未知宽高,ie7\8不支持，有css3属性-->
    <div class="content" style="position:relative;width:500px;height:500px;background:yellow;">
        <div class="is-Transformed" style="margin: auto;position: absolute;top: 50%; left: 50%;-webkit-transform: translate(-50%,-50%);-ms-transform: translate(-50%,-50%);transform: translate(-50%,-50%);}">这是另一种方式</div>
    </div>
    <br>


    <!--表格布局法，垂直居中,display:table-cell的子元素必须是行内元素，如果是div，则设置为display:inline-block-->
    <div style="display:table;width:300px;height:500px;border:solid blue 1px;">
        <div style="display:table-cell;vertical-align:middle;">
            表格布局法居中表格布局法居中表格布局法居中表格布局法居中表格布局法居中表格布局法居中表格布局法居中表格布局法居中表格布局法居中表格布局法居中表格布局法居中
        </div>
    </div>
    <br>


    <!--多行文字垂直居中，和表格布局法基本上一样，两种方式，ie8以上都支持-->
    <div style="width:500px;height:500px;background:green;">
        <div style="display:table-cell;vertical-align:middle;width:200px;height:200px;border:solid 1px red;">
            <span style="display:inline-block;vertical-align:middle;">这是多行文字垂直居中这是多行文字垂直居中这是多行文字垂直居中这是多行文字垂直居中这是多行文字垂直居中</span>
        </div>
    </div>
    <br>


    <!--大小不固定，图片的垂直居中，pixel.gif就是一张透明小图片，这实际上就是使用了背景图片，给背景图片定位居中的道理，前两个li一种写法，也可以用第三个li的方式,ie7及以上都支持-->
    <ul style="width:1000px;height:500px;padding:10px;background:green;list-style:none;">
        <li style="width:200px;height:200px;border:solid 1px red;float:left">
            <img src="pixel.gif" style="background-image:url(mm2.jpg);display:block;width:100%;height:100%;background-repeat:no-repeat;background-position:center;">
        </li>
        <li style="width:200px;height:200px;border:solid 1px red;float:left">
            <img src="pixel.gif" style="background-image:url(mm1.jpg);display:block;width:100%;height:100%;background-repeat:no-repeat;background-position:center;">
        </li>
        <li style="width:200px;height:200px;border:solid 1px red;float:left; background-image:url(mm1.jpg);background-position:center;background-repeat:no-repeat;">
        </li>
    </ul>
    <br>


    <!--table-cell方式实现图片居中，ie8及以上支持，和表格布局法一样-->
    <ul style="width:1000px;height:500px;background:green;">
        <li style="float:left;width:200px;height:200px;border:solid 1px red;">
            <div style="display:table-cell;vertical-align:middle;width:200px;height:200px;text-align:center;"><img src="mm2.jpg"></div>
        </li>
        <li style="float:left;width:200px;height:200px;border:solid 1px red;">
            <div style="display:table-cell;vertical-align:middle;width:200px;height:200px;"><img src="mm1.jpg"></div>
        </li>
    </ul>
    <br>


    <!--display:inline-block和文字大小控制局中，这个a标签或者div标签必须加上inline-block属性，但是此时必须加上宽度，加上高度就会不垂直居中，ie7及以上支持,display:inline-block;在ie6\7尚不支持，*的部分是对这个做了兼容-->
    <div style="width:500px;height:500px;background:green;">
        <a href="" style="display:inline-block;*display:inline;*zoom:1;width:200px;text-align:center;vertical-align:middle;border:solid 1px red;">
            <img src="mm2.jpg" style="vertical-align:middle;">
        </a>
        <div style="display:inline-block;*display:inline;*zoom:1;width:200px;text-align:center;vertical-align:middle;border:solid 1px red;">
            <img src="mm1.jpg" style="vertical-align:middle;">
        </div>
        <div style="display:inline-block;*display:inline;*zoom:1;width:200px;text-align:center;vertical-align:middle;border:solid 1px red;">
            <img src="mm1.jpg" style="vertical-align:middle;">
        </div>
    </div>
    <br>


    <!--使用空白图片实现垂直对齐，这块相当于透明图片撑起来了,使要显示的图片居中于透明图片，ie7及以上都支持-->
    <ul style="width:500px;height:500px;background:green;">
        <li style="width:200px;height:200px;float:left;border:solid 1px red;text-align:center;">
            <img src="mm1.jpg" style="vertical-align:middle;">
            <img src="pixel.gif" style="height:100%;width:1px;vertical-align:middle;">
        </li>
    </ul>