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

方法1、使用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大於容器，均能正常顯示）

 

來源：http://www.javashuo.com/article/p-ffrvhvjh-gu.html