如何在水平和垂直方向上將Div對准流體Div？

Question

我需要集中一個由div制成的塊，例如，在流體網格布局的屏幕中間。 在此塊內，我想放置一個圖像，一個密碼字段和一個提交按鈕。 當我在無響應布局中使用以下代碼執行此操作時，它可以完美工作，但在流暢的網格布局中卻無法：

#block-login {
    width: 650px;
    height: 378px;
    float: left;
    clear: both;
    margin-top: -189px;
    margin-left: -325px;
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
}

我指的Fluid div是這樣的：

<div class="gridContainer clearfix">
     <div id="div1" class="fluid"></div>
</div>

提前致謝。

Answer 1

這樣做有幾種方法：CSS表，CSS轉換和CSS flexbox。 不過，我通常避免使用CSS表。 與固定負邊距解決方案不同，CSS變換和flexbox解決方案都與子維度無關（子項的大小無關緊要，固定還是可變）。

對於CSS轉換，主要警告是必須明確定義父對象的尺寸（ .gridContainer的尺寸）。 訣竅是將其絕對定位為孩子，但要向左和從頂部偏移50％。 為了考慮孩子自己的計算尺寸，我們使用CSS轉換對此進行了修復。 您可能想要將供應商前綴添加到transform屬性。

.gridContainer {
    position: relative;
    width: (have to declare);
    height: (have to declare);
}
.gridContainer > div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

另一個解決方案（我覺得更優雅，但在較舊的瀏覽器中缺乏跨瀏覽器的支持）是使用CSS flexbox：

.gridContainer {
    display: flex;
    align-items: center;
    justify-content: center;
}

您可以在此處查看兩種解決方案的演示： http : //jsfiddle.net/teddyrised/B7PVh/

Answer 2

這是您可能的解決方案：

小提琴

CSS：

body,html,.gridContainer{
    width:100%;
    height:100%;
    margin:0;
    position:relative;
}
#div1 {
    width: 80%;
    height: 80%;
    margin:0;
    position: absolute;
    top: 10%;
    left: 10%;
    text-align: center;
    background:gold;
}

Answer 3

如果不需要支持IE9及以下版本，則可以通過使用相對位置調整和新的CSS calc()函數在流體容器中獲取固定寬度，固定高度div：

<div class="gridContainer">
    <div id="#block-login"> 
    </div>
</div>

#block-login {
    position:relative;
    top:calc(50% - 189px); /* 50% - 1/2 of it's own height */
    left:calc(50% - 325px); /* 50% - 1/2 of it's own width */
}    

jsfiddle演示

注意： caniuse.com列出了帶有ie-9的calc() “部分支持”