CSS实现垂直居中

一、阅读张鑫旭博客有感http://www.zhangxinxu.com/wordpress/?p=3794
他写的是实现绝对定位元素的居中，有三种方法

（1）兼容性较好的方法：
.element{

Width:600px;height:400px;

Position:absolute;left:50%;top:50%;   /*水平居中*/

Margin-top:-200px;   /*高度的一半*/

Margin-left:-300px;   /*高度的一半*/

}

特点：必须设置宽高，否则margin没法设置

（2）在（1）的基础上，克服一定要知道宽高的缺点，利用CSS3的transform
（注：transform：改变、变形、转换，有4种值：rotate()旋转、skew()倾斜、scale()缩放、translate()偏移）代替margin

.element{

Width:600px;height:400px;

Position:absolute;left:50%;top:50%;   /*水平居中*/

Transform:translate(-50%,-50%);     /*偏移的百分比值是相对于自身大小的*/

}

特点：IE10+以及其他现代浏览器才支持

(3)margin：auto实现
.element{

Margin:auto;

Width:600px;height:400px;

Position:absolute;left:0;top:0;right:0;bottom:0;

}

特点：可以不设置宽高

二、读张鑫旭《大小不固定的图片、多行文字的水平垂直居中》一文有感
1.大小不固定，多行文字的垂直居中
（1）单行文字

使用line-height,让line-height和元素的height相同，就可实现单行文字的垂直居中

（2）多行文字（用span封装文字）

如何实现父容器高度固定，文字可能一行，两行或更多行的垂直居中对齐呢？

实现的关键是把文字当图片处理。用一个span标签将所有的文字封装起来，设置文字与图片相同的display属性（inline-block属性），然后用处理图片垂直居中的方式处理文字的垂直居中即可。

要点：1.外部div不能浮动

2.外部div高度和文字比例1.14宜

3.内部标签的vertical-align:middle可以省略，但是外部div高度和文字大小比例要修改，高度比字体1.5左右的样子

2.大小不固定，图片的水平垂直居中(模糊)
（1）透明gif图片+背景定位（background-position：center）

方法的原理很简单，使用一个透明的gif图片做覆盖层，高宽拉伸至所需要的大小，然后给这个gif图片一个background- position:center center的属性。而background-image建议写在页面上，因为实际项目中，这肯定是个动态的URL地址，css文件似乎不支持动态URL 地址。下面就是实例演示页面的效果截图。

<imgsrc="../image/pixel.gif" style="background-image:url(http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg);"/>
（2）display:table-cell和文字大小居中控制

这个通过文字大小控制IE下图片垂直居中是个很不错的方法，要比使用position:relative这类高消耗的css方法要好多了。但是这个方法不足之处在于：不支持img外标签的浮动，所以当多图片显示时需要再在外面嵌套一层标签——资源消耗多了！

<ul class="zxx_align_box_4 fix">

    <li>

        <div><img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" /></div>

    </li>

</ul>

 

.zxx_align_box_4 li{float:left; margin-right:13px;}

.zxx_align_box_4 li div{display:table-cell; width:144px; height:144px; border:1px solid #beceeb; font-size:118px; text-align:center; vertical-align:middle;}

.zxx_align_box_4 li div img{vertical-align:middle;}

（3）display:inline-block和文字大小控制居中

适用于多图显示

<div class="zxx_align_box_5 fix">

    <a href="#zhangxinxu">

        <img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" />

    </a>

    <a href="#zhangxinxu">

        <img src="http://image.zhangxinxu.com/image/study/s/s128/mm2.jpg" />

    </a>

</div>

 

.zxx_align_box_5 a{display:inline-block; width:1.2em; font-size:128px; text-align:center; vertical-align:middle;}

.zxx_align_box_5 a img{vertical-align:middle; padding:2px; border:1px solid #beceeb;}

说明：

1.img外的标签需是a标签或span这类inline属性的标签，div标签也可以，但是css代码多些:display:inline; display:inline-block先变成inline属性，再转变成inline-block属性。

2.此方法只需要两层标签即可，可谓代码超简洁，但是只适用于多图垂直居中对齐的情况。因为其对齐原理是相邻的图片居中对齐，如果只是一个图片，vertical-align:middle就只有与空格对齐了。

（4）使用空白图片实现垂直对齐（最优）

<ul class="zxx_align_box_6 fix">

    <li>

        <img class="show_img" src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" />

        <img class="alpha_img" src="../image/pixel.gif" />

    </li>

</ul>

 

.zxx_align_box_6 li{height:128px; width:150px; padding:13px 0; float:left; margin-right:10px; border:1px solid #beceeb; text-align:center; font-size:0;}

.zxx_align_box_6 li .alpha_img{height:100%; width:1px; vertical-align:middle;}

.zxx_align_box_6 li .show_img{vertical-align:middle;}

 

一、阅读张鑫旭博客有感http://www.zhangxinxu.com/wordpress/?p=3794
他写的是实现绝对定位元素的居中，有三种方法

（1）兼容性较好的方法：
.element{

Width:600px;height:400px;

Position:absolute;left:50%;top:50%;   /*水平居中*/

Margin-top:-200px;   /*高度的一半*/

Margin-left:-300px;   /*高度的一半*/

}

特点：必须设置宽高，否则margin没法设置

（2）在（1）的基础上，克服一定要知道宽高的缺点，利用CSS3的transform
（注：transform：改变、变形、转换，有4种值：rotate()旋转、skew()倾斜、scale()缩放、translate()偏移）代替margin

.element{

Width:600px;height:400px;

Position:absolute;left:50%;top:50%;   /*水平居中*/

Transform:translate(-50%,-50%);     /*偏移的百分比值是相对于自身大小的*/

}

特点：IE10+以及其他现代浏览器才支持

(3)margin：auto实现
.element{

Margin:auto;

Width:600px;height:400px;

Position:absolute;left:0;top:0;right:0;bottom:0;

}

特点：可以不设置宽高

二、读张鑫旭《大小不固定的图片、多行文字的水平垂直居中》一文有感
1.大小不固定，多行文字的垂直居中
（1）单行文字

使用line-height,让line-height和元素的height相同，就可实现单行文字的垂直居中

（2）多行文字（用span封装文字）

如何实现父容器高度固定，文字可能一行，两行或更多行的垂直居中对齐呢？

实现的关键是把文字当图片处理。用一个span标签将所有的文字封装起来，设置文字与图片相同的display属性（inline-block属性），然后用处理图片垂直居中的方式处理文字的垂直居中即可。

要点：1.外部div不能浮动

2.外部div高度和文字比例1.14宜

3.内部标签的vertical-align:middle可以省略，但是外部div高度和文字大小比例要修改，高度比字体1.5左右的样子

2.大小不固定，图片的水平垂直居中(模糊)
（1）透明gif图片+背景定位（background-position：center）

方法的原理很简单，使用一个透明的gif图片做覆盖层，高宽拉伸至所需要的大小，然后给这个gif图片一个background- position:center center的属性。而background-image建议写在页面上，因为实际项目中，这肯定是个动态的URL地址，css文件似乎不支持动态URL 地址。下面就是实例演示页面的效果截图。

<imgsrc="../image/pixel.gif" style="background-image:url(http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg);"/>
（2）display:table-cell和文字大小居中控制

这个通过文字大小控制IE下图片垂直居中是个很不错的方法，要比使用position:relative这类高消耗的css方法要好多了。但是这个方法不足之处在于：不支持img外标签的浮动，所以当多图片显示时需要再在外面嵌套一层标签——资源消耗多了！

<ul class="zxx_align_box_4 fix">

    <li>

        <div><img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" /></div>

    </li>

</ul>

 

.zxx_align_box_4 li{float:left; margin-right:13px;}

.zxx_align_box_4 li div{display:table-cell; width:144px; height:144px; border:1px solid #beceeb; font-size:118px; text-align:center; vertical-align:middle;}

.zxx_align_box_4 li div img{vertical-align:middle;}

（3）display:inline-block和文字大小控制居中

适用于多图显示

<div class="zxx_align_box_5 fix">

    <a href="#zhangxinxu">

        <img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" />

    </a>

    <a href="#zhangxinxu">

        <img src="http://image.zhangxinxu.com/image/study/s/s128/mm2.jpg" />

    </a>

</div>

 

.zxx_align_box_5 a{display:inline-block; width:1.2em; font-size:128px; text-align:center; vertical-align:middle;}

.zxx_align_box_5 a img{vertical-align:middle; padding:2px; border:1px solid #beceeb;}

说明：

1.img外的标签需是a标签或span这类inline属性的标签，div标签也可以，但是css代码多些:display:inline; display:inline-block先变成inline属性，再转变成inline-block属性。

2.此方法只需要两层标签即可，可谓代码超简洁，但是只适用于多图垂直居中对齐的情况。因为其对齐原理是相邻的图片居中对齐，如果只是一个图片，vertical-align:middle就只有与空格对齐了。

（4）使用空白图片实现垂直对齐（最优）

<ul class="zxx_align_box_6 fix">

    <li>

        <img class="show_img" src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" />

        <img class="alpha_img" src="../image/pixel.gif" />

    </li>

</ul>

 

.zxx_align_box_6 li{height:128px; width:150px; padding:13px 0; float:left; margin-right:10px; border:1px solid #beceeb; text-align:center; font-size:0;}

.zxx_align_box_6 li .alpha_img{height:100%; width:1px; vertical-align:middle;}

.zxx_align_box_6 li .show_img{vertical-align:middle;}