絕對定位div中的中心內容

我有一個絕對定位的元素，裏面有內容。它可以是<h1>或幾個<p>標籤。所以我不知道內容的高度。絕對定位div中的中心內容

我該如何將內容垂直居中放置在絕對位置div？

HTML：

<div id="absolute"> 
    <div class="centerd"> 
    <h1>helo</h1> 
    <span>hi again</span> 
    </div> 
</div>

CSS：

#absolute { 
    position:absolute; 
    top:10px; 
    left:10px; 
    width:50%; 
    height:50%; 
    background:yellow; 
} 

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

Fiddle

來源

2013-04-26 user2324261

如果添加display:table你#absolute DIV你應該得到你想要的東西：

http://jsfiddle.net/3KTUM/2/

來源

2013-04-26 14:37:16 Pete

這不居中內容..它只是使內容* *開始從中心 – 2013-04-26 14:38:13

@ExplosionPills似乎中心我的內容 - 嘗試加入更多的內容和你將看到它保持垂直對齊，而不是從中心開始。你可能會認爲它是從中心開始的，因爲h1會有自然的頂部填充，從而將其推倒 – Pete 2013-04-26 14:41:18

更改#absolute格也使用：

display:table; 
vertical-align:middle; 
text-align:center;

http://jsfiddle.net/3KTUM/4/

來源

2013-04-26 14:39:13

只是要在div relative其absolute父母和使用text-align: center，像這樣：

.centerd { 
    position: relative; 
    width: 100%; 
    text-align: center; 
    /*display:table-cell; 
    vertical-align:middle;*/ 
}

見example fiddle

來源

2013-04-26 14:42:42 Nelson

使用文本對齊：中心或左：50％

來源

2016-08-22 07:06:40 santhosh

這可以用Flexbox的做太：

#absolute { 
    align-items: center; 
    display: flex; 
    justify-content: center; 
}

來源

2017-06-09 13:18:30

水平和垂直位置的絕對中心。

.center { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50% , -50%); 
 
    -webkit-transform: translate(-50%, -50%); 
 
}

<div class="obj"> 
 
    <div class="center">Test</div> 
 
</div>

來源

2018-03-07 11:33:48

絕對定位div中的中心內容

回答

相關問題