居中div元素水平和垂直

我無法集中我的網頁內容。這裏是我的HTML的修剪版本以及與該HTML代碼相關的所有CSS。居中div元素水平和垂直

<body> 
<div id="foo"> 

    <div id="bar"> 
     <!-- more html --> 
    </div> 
</div>

#foo { 
    width: 80%; 
    display: inline-block; 
    margin: 0 auto; 
    position: center; 
    background: none; 
    margin-top: -0.2em; 
} 

#foo div { 
    display: inline-block; 
} 

#bar { 
    margin: 0 auto; 
    margin-top: -1em; 
}

內容粘在瀏覽器窗口的左上角。我希望它水平和垂直居中。我如何實現這一目標？

編輯：我最初寫了右上角，但意味着左上角。

來源

2014-04-04 user3324865

存在爲'位置沒有這樣的事：center' – Anubhav

'position'屬性用於爲定位元素選擇替代規則，而不是選擇將它們放置在何處。然後，「位置：中心」沒有意義。 – Oriol

它不是位置：中心其text-align：center;對齊內容中心

檢查fiddle

#foo { 
    width: 80%; 
    display: inline-block; 
    margin: 0 auto; 
    text-align:center; 
    background: none; 
    margin-top: -0.2em; 
}

並刪除的margin-top：-1em它會轉移孩子的div =欄頂部和內容將被隱藏檢查下方

#bar { 
    margin: 0 auto; 
    /*margin-top: -1em;*/ 
    border:1px solid red; 
}

檢查fiddle

來源

2014-04-04 17:38:43

沒有position: center。您可以使用position: absolute並設置top/left屬性，它在中心安排（如果它佔據了整個寬度，你可以簡單地使用text-align: center）

top: 50%; 
left: 50%; 
-webkit-transform: translate(-50%, -50%); 
transform: translate(-50%, -50%);

http://jsfiddle.net/Pq6CR/

來源

2014-04-04 17:34:32

居中div元素水平和垂直

回答

相關問題