方法一、使用line-heigh使多行文字居中或圖片居中
把文字包裹在一個inline-block元素中vertical-align middle，外部元素line-heigh等於高度
1 <div class="box1"> 2 <span>多行居中測試多行居中測試多行居中測試多行居中測試多行居中測試多行居中測試多行居中測試多行居中測試多行居中測試多行居中測試多行居中測試多行居中</span> 3 </div>
1 .box1{
2 background-color: #ccc;
3 width: 300px;
4 height: 300px;
5 margin: 100px auto;
6 line-height: 300px;
7 }
8 .box1 span{
9 display: inline-block;
10 line-height: 20px;
11 vertical-align: middle;
12 }
圖片居中：
1 <div class="box1"> 2 <img src="common-header-logo.png"> 3 </div>
1 .box1{
2 background-color: #ccc;
3 width: 300px;
4 height: 300px;
5 margin: 100px auto;
6 line-height: 300px;
7 text-align: center;
font-size: 0;
8 }
9 .box1 img{
10 vertical-align: middle;
11 }
效果：
方法二：使用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;/*主軸居中*/
}
方法三：使用絕對定位使圖片居中
css-使不同大小的圖片在固定大小的容器中居中
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>
方法一：
.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使圖片比容器大時也能正常顯示。
方法二：
.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。
效果圖：（最后兩個圖片width/height大於容器，均能正常顯示）
