如何在沒有寬度和邊距的情況下水平居中div

Question

如何在不支持舊版本瀏覽器的情況下水平居中div而不是寬度display：inline-block屬性。

如何中心我.container股利水平不寬

<div class="main_section"> 
    <div class="content_wrapper"> 
    <div class="container">My content</div> 
    </div> 
</div> 

Answer 1

讓你想中心（.container）inline-block的內容。這樣你可以在父div上使用text-align: center作爲中心。

.container { 
 
    display: inline-block; 
 
    background-color: red; 
 
} 
 

 
.content_wrapper { 
 
    background-color: blue; 
 
    text-align: center; 
 
}

<div class="main_section"> 
 
    <div class="content_wrapper"> 
 
    <div class="container">My content</div> 
 
    </div> 
 
</div>

Answer 2

body { 
 
    padding: 200px 0 0 0; 
 
    margin: 0; 
 
} 
 
.main_section { 
 
    float: right; 
 
    position: relative; 
 
    right: 50%; 
 
    z-index: 999; 
 
} 
 
.content_wrapper { 
 
    float: right; 
 
    position: relative; 
 
    right: -50%; 
 
} 
 
.container { 
 
    color: #333; 
 
    background: #f5f5f5; 
 
    border: 5px #ccc solid; 
 
    padding: 10px; 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    font-size: 20px; 
 
    letter-spacing: 1px; 
 
    max-width: 1000px; 
 
    box-shadow: -1px -1px 5px 1px #666666; 
 
}

<div class="main_section"> 
 
    <div class="content_wrapper"> 
 
    <div class="container">Div align center without fix width</div> 
 
    </div> 
 
</div>

Answer 3

你可以嘗試設置外層div保證金：0汽車

它將爲響應工作了。