Question

我需要在全屏div中将div（未定义的宽度）水平和垂直居中。

我有以下代码。

外部div：

background: #000 url('header.jpg') no-repeat center center /* fixed */;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
height: 100%;
position: relative;
text-align: center;
width: 100%;

内部div：

left: 50%;
margin-top: -300px;
margin-left: -300px;
max-width: 600px;
position: absolute; 
top: 50%;
z-index: 2;

但它不干净 - 特别是当我调整窗口大小时。这在某种程度上不是垂直居中的。

你可以帮我这个吗？

谢谢！

2 个答案:

答案 0 :(得分：0)

答案 1 :(得分：-1)

Answer 1

在这种情况下不要使用position:absolute。您不必使用z-index，因为默认情况下，孩子将永远留在父母的前面。这不是您的情况，因为父级是relative，而子级absolute和position:relative为父级提供了更大的堆叠顺序。

因此，如果您的内部div是父级的50％宽度和高度，请写top:25%和margin:0 auto;

如果是70％：top:15%; margin:0 auto;

html, body{
width:100%;
  height:100%;
}
.outer{background: #000 url('http://lorempixel.com/g/400/200/') no-repeat center center /* fixed */;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
height: 100%;
position: relative;
text-align: center;
width: 100%; 

}
.inner{
height:50%;
width: 50%;
position: relative; 
top: 25%;
background:red;
  margin:0 auto;
  
}

<div class="outer">
<div class="inner">
  
  </div>
</div>

Answer 2

简单的解决方法是：

<outerdiv><center><innerdiv></div></center></div>

但是＆＃39; 0自动＆＃39;是使div居中的正确方法

innerdiv {
margin:0 auto;
}

然后您可以相应地调整顶部和底部

将div放在全屏div中

2 个答案: