2016-03-28 78 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

我以为一样,但后来意识到它始终是性能的首选。检查我对该帖子的评论。 –