Question

这是jsfiddle：http://jsfiddle.net/techsin/1o5zzcgh/

我想在不使用jquery的情况下将两个绝对定位的div放在彼此中心。现在我使用top：0和bottom 0但是当定义高度时这不起作用。

* {
    margin: 0;
    padding: 0;
}
html, body {
    position: relative;
    height: 100%;
    width: 100%;
}
.in, .out {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.in {
    background-color: red;
    height: 50%;
}
.out {
    background-color: blue;
}

Answer 1

你可以使用这个小黑客：

HTML：

    <div class="out">
    <div class="in">
    </div>
</div>

CSS：

.in, .out {
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
}
.in {
   background-color: red;
   height: 50%;
   left: 50%;
   top: 50%;
   -moz-transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
     -webkit-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);  
}
.out {
  background-color: blue;
}

通过使用left / top和translate minus值，您可以根据需要居中。

HTH。

Answer 2

您需要将 margin：auto; 添加到绝对定位的div，然后应用 height：50％; 和 width：50％; 到.in div。

* {
    margin: 0;
    padding: 0;
}
html, body {
    position: relative;
    height: 100%;
    width: 100%;
}
.in, .out {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin:auto;  
}
.in {
    background-color: red;
    height: 50%;
    width:50%;
 }
.out {
    background-color: blue;
}

JSFIDDLE： http://jsfiddle.net/a_incarnati/1o5zzcgh/1/

你也可以设置一个高度，但是你需要记住，因为容器是100％，所以它不是正方形。

Answer 3

你指的是这样的东西吗？

    * {
    margin: 0;
    padding: 0;

}
html, body {
    position: relative;
    height: 100%;
    width: 100%;
}
.in, .out {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.in {
    width: 50%;
    height:50%;
    top: 20%;
    left: 20%;
    background-color: red;
}
.out {
    background-color: blue;
}

Demo

你如何将绝对div中的绝对div放在中心？

3 个答案: