响应式设计，垂直和水平对齐div内的div

Question

非常简单的概念：

• div-1的宽度为90％，高度为1000px，
• div-2的宽度为20％（div-1），没有高度。

我可以使用CSS在div-1中水平和垂直居中div-2吗？

Answer 1

当然可以。在外部容器上使用position:relative;，在内部使用position:absolute，以及更多样式（在下面列出）

.outer {
    width:90%;
    height:1000px;
    position:relative;
}
.inner {
    height:2px; /* To make it visible */
    width:20%;
    position:absolute;
    left:40%;
    top:50%;

    transform:translateY(-50%); /* Optional; positions it perfectly in center. 
                                Alternatives include using negative margins
                                or javascript to compensate.Needs some prefixes*/
}

Demo

我不确定你为什么要一个元素的高度为0 ......