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;
}

我所指的流体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

这是一个可能的解决方案：

<强> FIDDLE

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及以下版本，您可以使用相对positoining和新的CSS calc()函数获得一个以流体容器为中心的固定wdith固定高度div： / p>

<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 */
}

A jsfiddle demo

注意：caniuse.com列出＆＃34;部分支持＆＃34; for calc() with ie-9

如何将Div水平和垂直对齐流体？

3 个答案: