在另一個div內定位div的問題

Question

我有一個需要在另一個div內水平居中的div。問題是內部div是幾乎爲居中 - 即它居中，但左邊距/填充（我無法確定哪個）約爲5-10px。如何讓內部div位於外部div的中心？

HTML：

<div class="outer"> 
    <div class="inner"> 
     // stuff 
    </div> 
</div> 

CSS：

.outer { 
    position:relative; 
    display:inline-block; 
    width:100%; 
} 

.inner { 
    position:relative; 
    padding:10px; 
    width:200px; 
    height:200px; 
} 

Answer 1

你可以做這樣的事情：

#parent { 
    display: table-cell; 
    width: 300px; 
    height: 300px; 
    vertical-align: middle; 
    text-align: center; 
    border: 1px solid black; 
} 

#child { 
    display: inline-block; 
    width:100px; 
    height: 100px; 
    border: 1px solid black; 
} 

這裏有一個小提琴：http://jsfiddle.net/De36Y/

[如何在一個div居中DIV - 水平？]的

Answer 2

我會盡量使內部的div有一個位置是：絕對的，然後設置保證金像下面同樣：

CSS：

.outer { 
    position:relative; 
    display:inline-block; 
    width:100%; 
} 

.inner { 
    position: absolute; 
    margin-left: auto; 
    margin-right: auto 
    width:200px; 
    height:200px; 
} 

Answer 3

開.inner使用：

width: 50%; margin: 0 auto;

Answer 4

你能做到這一點

.outer { 
    position:relative; 
    display:inline-block; 
    width:100%; 
    text-align: center; 
} 

.inner { 
    position:relative; 
    display: inline-block; 
    padding:10px; 
    width:200px; 
    height:200px; 
} 

Answer 5

這個怎麼樣的代碼？

.inner { 
position:relative; 
padding:10px; 
width:200px; 
height:200px; 
/* included */ 
left:50%; 
margin-left:-100px;}