css-文字和图片在容器内垂直居中的简单方法

方法一、使用line-heigh使多行文字居中或图片居中

把文字包裹在一个inline-block元素中vertical-align middle，外部元素line-heigh等于高度

• 文字居中
  HTML:

  <div class="box1">
    <span>多行居中测试多行居中测试多行居中测试多行居中测试多行居中测试多行居中测试多行居中测试多行居中测试多行居中测试多行居中测试多行居中测试多行居中</span>
  </div>
  

  CSS:

  .box1{
    background-color: #ccc;
    width: 300px;
    height: 300px;
    margin: 100px auto;
    line-height: 300px;
  }
  .box1 span{
    display: inline-block;
    line-height: 20px;
    vertical-align: middle;
  }
  

• 图片居中：
  HTML:

  <div class="box1">
    <img src="common-header-logo.png">
  </div>
  

  CSS:

  .box1{
    background-color: #ccc;
    width: 300px;
    height: 300px;
    margin: 100px auto;
    line-height: 300px;
    text-align: center;
    font-size: 0;
  }
  .box1 img{
   vertical-align: middle;
  }
  

方法二：使用flex布局实现居中（更简单，不支持IE9）

HTML：

<div class="box">
　　<span>span多行居中测试<br>span多行居中测试<br>span多行居中测试</span>
　　<p>p另一个段落元素</p>
</div>

CSS：

.box{
    display: flex;
    width: 500px;
    height: 300px;
    margin: 50px auto;
    border: 2px solid #000;
    align-items: center;/*副轴居中*/
}
.box span{/*span是另一个flex布局容器，它本身将自适应填满除p元素外的宽度*/
    flex: 1;
    display: flex;
    justify-content: center;/*主轴居中*/
}

方法三：使用绝对定位使图片居中

HTML:

<ul>
    <li class="imgbox"><img src="img1.jpg"></li>
    <li class="imgbox"><img src="img2.jpg"></li>
    <li class="imgbox"><img src="img3.jpg"></li>
    <li class="imgbox"><img src="img4.jpg"></li>
    <li class="imgbox"><img src="img5.jpg"></li>
    <li class="imgbox"><img src="img6.jpg"></li>
    <li class="imgbox"><img src="img7.png"></li>
</ul>

CSS:

.imgbox{
    position: relative;
    width: 240px;
    height: 240px;
}
.imgbox img{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
    outline: 1px solid #000;
}

说明：imgbox为放置图片的容器，高度和宽度可以设置为任意需要的大小，容器中的图片为绝对定位，使用top-bottom-left-right-margin使其居中。使用max-width和max-height使图片比容器大时也能正常显示。

CSS:

.imgbox{
    font-size: 0;
    width: 240px;
    height: 240px;
    line-height: 240px;
    text-align: center;
}
.imgbox img{
    max-height: 100%;
    max-width: 100%;
    vertical-align: middle;
    outline: 1px solid #000;
}

说明：对容器设置font-size：0，消除img下多出的3px，防止居中出现偏差。outline可有可无，我是为了清晰显示图片位置才声明的outline。