我需要中心圖像到div與CSS

Question

我需要在我的div中心圖像，但是當我使用一些代碼它會改變我的其他代碼，這就像魔術圈。

我的HTML http://textuploader.com/d40ta 我的CSS http://textuploader.com/d40t5

Answer 1

CSS3解決方案：

只需修改下面的CSS類。

.iui { 
    border: 2px solid black; 
    width: 200px; 
    height: 200px; 
    border-radius: 100px; 
    top: 20px; 
    display:flex; 
    justify-content:center; 
    align-items:center; 
    background-color: red; 
    margin-left: auto; 
    margin-right:auto; 
} 

JSFiddle Demo

CSS解決方案：

在下面的解決方案，我們需要設置CSS屬性line-height相同的類iui元素的高度。然後我們需要用CSS屬性display:inline-block;vertical-align:middle在div內設置圖像，這將使圖像居中。

.iui { 
    border: 2px solid black; 
    width: 200px; 
    height: 200px; 
    line-height: 200px; 
    border-radius: 100px; 
    text-align: center; 
    background-color: red; 
    margin-left: auto; 
    margin-right:auto; 
} 

.iui img{ 
    vertical-align:middle; 
    display:inline-block; 
} 

JSFiddle Demo

Answer 2

圖像默認inline-block的。這意味着您可以使用text-align: center將它們居中在塊級別的父級中。 <div>或<p>元素（默認情況下爲塊級別），但您可以通過將display: block應用於該元素來創建幾乎任何元素塊級別。

如果圖像display: block已經，可以通過施加margin: 0 auto其中auto是函數值（第一值可以是任何單元，加入餘量的圖像的頂部和底部）居中。