2016-03-28 77 views
-1

我想中心位置固定的div。它的寬度被指定爲300px而不是百分比。如何垂直對齊位置固定的div和px寬度?

<div class="mainCont"> 
    <div class="childCont"> 
</div> 

childCont是固定位置和寬度300px的div。我想把它作爲中心。

+2

它更可能得到迴應,如果有一個小提琴在問題中,每個人都可以更輕鬆地看到您嘗試過的內容並對其進行更改並將其作爲其答案的一部分發布。不過,你是否嘗試過使用'margin:auto'? –

+0

你想垂直居中水平嗎? – ketan

+0

實際上我試圖顯示彈出窗口,所以我需要水平和垂直中心 –

回答

0

使用以下CSS到你的 'childCont' 類:

.childCont { 
    position: fixed; 
    width: 300px; 
    top: 50%; 
    left: 50%; 
    transform: translate3d(-50%,-50%, 0); 
} 
+0

這裏我不認爲'3D'是必要的。 –

+0

這將需要div到完美的中心。 – WisdmLabs

+0

爲什麼「頂部:50%」? – madalinivascu

1

使用下面的CSS:

.childCont { 
    left: 50%; 
    position: fixed; 
    top: 50%; 
    transform: translate(-50%, -50%); 
    width: 300px; 
} 

Working Fiddle

+0

它與WisdmLabs已發佈的答案有何不同? –

+0

@Mr_Green不需要'translate3d'。檢查我的小提琴 – ketan

+0

我以爲一樣,但後來意識到它始終是性能的首選。檢查我對該帖子的評論。 –