CSS制作图片水平垂直居中 亲测推荐

空白标签实现图片的垂直居中

这种方法很有意思，也很有独特之处，我的思路也是来自于张鑫旭-鑫空间-鑫生活写的《大小不固定的图片、多行文字的水平垂直居中》一文中的使用空白图片实现垂直对齐。他主要使用了一张宽度为1px高度为100％的透明图片，并设置图片“vertical-align:middle”。后来我想了想，此处能不能不使用图片，直接像上面的实例一样，用一个空格的span标签，只是将其“display:inline”设置为“display:inline-block”。因为这两者的核心原理都是一致的：我将span行内元素设置为行内块元素，也就是将其display设置为“inline-block”，将其宽度定位1px，height为容器的100%，这样高度可以和容器的高度达到一样，然后通过“vertical-align:middle”设置垂直对齐，从而实现所需要的效果。因为张鑫旭-鑫空间-鑫生活写的《大小不固定的图片、多行文字的水平垂直居中》一文中的使用空白图片实现垂直对齐成功实现效果，于是我也按自己的思路动手一试，效果和他的一模一样，而且兼容各浏览器，代码较第一种方法又简单很多，最主要的不要单独给IE写效果，而且易懂，下面一起看看这种方法吧。

HTML Markup

            <ul class="imgWrap clearfix">
                <li><a href="#" class="imgBox"><span></span><img src="images/img1.jpg" alt="" /></a></li>
                <li><a href="#" class="imgBox"><span></span><img src="images/img2.jpg" alt="" /></a></li>
                <li><a href="#" class="imgBox"><span></span><img src="images/img3.jpg" alt="" /></a></li>
                <li><a href="#" class="imgBox"><span></span><img src="images/img4.jpg" alt="" /></a></li>
            </ul>

 

CSS Code

            <style type="text/css">
                .imgWrap li{ 
                    width: 219px;
                    height: 219px;
                    float: left;
                    border: solid 1px #666;
                    margin: 10px 10px 0 0;
                    list-style: none;
                    text-align: center;
                    font-size: 0;
                }

                .imgWrap a {
                    display: block;
                    height: 100%;
                    background: #ffa url(images/gridBg.gif) repeat center;
                }
                .imgWrap a:hover {
                    background-color: green;
                }
                .imgWrap span {
                    display: inline-block;/*将行内元素改变为行内块元素显示*/
                    width: 1px;/*实现ＩＥ下可读效果*/
                    height: 100%;/*使用元素高度和图片容器高度一样*/
                    vertical-align: middle;/*垂直对齐*/
                }

                .imgWrap img {
                    vertical-align: middle;
                }
            </style>

 

效果

原文链接：http://www.w3cplus.com/css%2520/img-vertically-center-content-with-css