图片水平居中

max-width:100%

多行文本水平垂直居中：

.box{

    line-height: 250px;text-align: center;

}

.box>.text{

    display: inline-block;

    line-height: normal;

    text-align: left;

    vertical-align: middle;

    max-width: 100%;

}

图片默认是 "inline-block水平"

.box{line-height: 300px;text-align:center;}
.box>img{vertical-align:middle}

实现了盒子里图片的水平垂直居中

.box{ line-height:300px; text-align:center}
.box > .text{ display:inline-block;line-height:normal;
text-align:left;vertical-align:middle;}

实现多行文本的水平垂直居中

多行文本水平垂直居中效果实现

多行水平居中

记得加max-width:100%

图片水平垂直居中

line-height的实际应用：

1、大小不固定的图片、多行文字垂直居中

1）图片水平垂直居中

2）多行文本水平垂直居中

2、代替height，避免IE6\7下的haslayout

实现多行垂直居中可以将多行文本使用一个元素包裹，设置为display:inline-block转换成图片一样的display属性，然后使用vertical-align:middle。

给图片设置   vertical-align: middle不兼容IE8以下的浏览器。

实现多行垂直居中可以将多行文本使用一个元素包裹，设置为display:inline-block模拟成图片，然后使用vertical-align:middle。

IE6里如果给元素设置height后，会导致元素的行内元素或行内块状元素块状化，导致流体布局或者自适应布局错乱，需要注意，可以使用line-height代替

多行文本水平垂直居中

图片水平垂直居中

line-height的实际应用

（IE8+浏览器可使用）

多行文字水平垂直居中

图片水平居中

一般来说height和line-height同时存在，height多余？？？

middle并非真正居中

vertical-align:middle