CSS居中实例--大小不固定的图片居中

上一篇CSS居中问题探索中，通过实例的方式展示了一下text-align:center、margin:0 auto;、line-height: boxHeight、position和margin或者transform配合使用还有display:table-cell来实现水平居中或者垂直居中的方式方法，本篇主要补充三个垂直水平居中的实例，或者更直接的说是大小不固定的图片垂直水平居中实现的两种方式和多行文本的垂直居中的方法。

相对于实现水平居中，垂直居中比较麻烦，所以接下来的以垂直居中为重点，水平居中，可以在代码中自己看看实现。

大小不固定的图片垂直水平居中

在商品展示性的网站，特别是电商网站，这种需求特别多，比如：

京东商品展示图片

从上图可以看出，这些商品的大小是不固定的，所以要求所有图片都要垂直水平居中，这时候我们的需求就来了（PS:其实京东这些图片都是固定大小的，嘿嘿）。

利用table-cell实现垂直居中

利用table-cell实现垂直居中

    [站外图片上传中……(5)]

div{
  width: 500px;
  height: 500px;
  background: #ccc;
}
.box1{
  text-align:center;
  display: table-cell;
  vertical-align: middle;
  /* font-size: 118px; */
}
img{
  vertical-align: middle;
}

利用父元素为display:table-cell类型实现垂直居中，table在ie8+的浏览器中自带的垂直居中的属性。

注意：img{vertical-align: middle;}只是为了消除display:inline-block类型的基线对齐问题。

利用添加兄弟元素实现垂直居中

利用添加兄弟元素实现垂直居中

    
    [站外图片上传中……(6)]

div{
  width: 500px;
  height: 500px;
  background: #ccc;
}
.box2{
  text-align:center;
}
i{
  display: inline-block;
  height: 100%;
  width: 0;
  vertical-align: middle;
}
img{
  vertical-align: middle;
}

利用给img添加兄弟元素，重新设置基线的位置。

多行文本的垂直居中方法

有时可能我们会遇到需要多行文本垂直居中的一些情况，但是做起来有时有些麻烦，需要我们换个思路去实现。

多行文本的垂直居中

    你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据你好，我是测试数据

div{
  width: 500px;
  height: 500px;
  background: #ccc;
}
.box3{
  display: table-cell;
  vertical-align: middle;
}
span{
  display: inline-block;
  vertical-align: middle;
}

将内部的文本用span标签（其他标签也可以）包裹起来，把span标签设为inline-block,然后当图片的垂直居中处理(ie8+)。

小结

本文也是从以前的学习笔记中翻出来整理的一个css基础小点， 在这里记录一下，免得每次遇到问题总是翻笔记。