如何在div中居中放置div？

Question

我正在嘗試創建聯系人列表，但無法將其包圍。 我想垂直居中細節面板：

.contactpanel .icon
{
    background: url('http://www.alter-net.info/Person.png');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: 14px 14px;
    position: absolute;
    left: 0;
    width: 60px;
    height: 60px;
}

.contactpanel .detailspanel
{
    margin-left: 65px;
}

在JSFiddle上：

http://jsfiddle.net/hu6wq7km/

我希望詳細信息（名稱和電子郵件）在面板內垂直居中，如何實現？

Answer 1

如果高度未知，則可以使用“表格技巧”將內容垂直居中。

鏈接到JSbin： http : //jsfiddle.net/9xqdtbqu/

CSS：

.contactpanel
{
    display:table;
}

.contactpanel .icon
{
   display: table-cell;
   vertical-align: middle;      

}

.contactpanel .detailspanel
{
   display: table-cell;
   vertical-align: middle;    
} 

Answer 2

使用頂部和底部填充可以執行此操作，將填充添加到detailpanel

更新您的CSS以獲得課程詳細信息

.contactpanel .detailspanel
{
    margin-left: 65px;
    padding: 12px 0;
}

http://jsfiddle.net/hu6wq7km/5/

Answer 3

或者，您也可以嘗試以下方法：

.contactpanel .detailspanel {
    bottom: 0;
    height: 40px;
    margin: auto 0 auto 65px;
    position: absolute;
    top: 0;
}

Answer 4

查看contactpanel的高度（ 60px ，您將獲得一個id detailspanel的div 。 簡單的填充將調整center的detailspanel 。

嘗試使用padding : 10px ，它將調整detailspanel為中心。

要完全控制頁面上的元素進行調整。 將個人div's name和email的高度設置為15px沒有任何padding和margin: 10px ，這可以解決問題。 由於name和email div的margin-bottom和margin-top將折疊。

Answer 5

為div.detailspanel添加絕對位置，如下所示：

.contactpanel .detailspanel
{
    margin-left: 74px;
    position: absolute;
    margin-top: 11px;
}

供您參考，請檢查此小提琴： http : //jsfiddle.net/hu6wq7km/9/