css-文字和圖片在容器內垂直居中的簡單方法

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

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

    <div class="box1">
        <span>多行居中測試多行居中測試多行居中測試多行居中測試多行居中測試多行居中測試多行居中測試多行居中測試多行居中測試多行居中測試多行居中測試多行居中</span>
    </div>

.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;
}

圖片居中：

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

.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;/*主軸居中*/
}

方法三：使用絕對定位使圖片居中

見http://www.cnblogs.com/zczhangcui/p/6274660.html