html - 元素未居中。我使用绝对值吗？

div #introbox没有居中。我已经将容器用作相对，将Introbox用作绝对。我已将top，bottom，left和right设置为0。我想将Introbox放在Intropic中。

html,body{
    	padding: 0;
    	margin:0;
    }


    .container{
    	width: 960px;
    	margin:0 auto;
    	position: relative;
    }

    #header{
    	width: 100%;
    	height: 120px;
    	border-bottom: 1px solid black;
    }


    #nav{
    	height: 55px;
    	border-bottom: 4px solid lightblue ;
    }

    #intro-pic{
    	height: calc(100vh - 181px);
    	width: 100%;
    	background: url("img/introbg.jpg") center fixed;
    }

    #intro-box{
    	height: 55vh;
    	width: 800px;
    	background: rgba(0,0,0,0.74);
    	border-radius: 15px;
    	position: absolute;
    		top: 0px;
    		bottom: 0px;
    		right: 0px;
    		left:0px;
    }

<div id="header">
    	<div class="container">
    		Header
    	</div>
    </div>

    <div id="nav">
    	<div class="container">
    		Nav
    	</div>
    </div>

    <div id="intro-pic">
    	<div class="container">
    		<div id="intro-box">
    			sdfdsfds
    		</div>
    	</div>
    </div>

最佳答案

使用transform:translate将适用于任何大小的div。

html,
body {
  padding: 0;
  margin: 0;
  height:100%;
}
.container {
  width: 960px;
  margin: 0 auto;
  position: relative;
  height:100vh;
}
#intro-box {
  height: 55vh;
  width: 800px;
  background: rgba(0, 0, 0, 0.74);
  border-radius: 15px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  /* vertical centering */
}

<div id="intro-pic">
  <div class="container">
    <div id="intro-box">
      sdfdsfds
    </div>
  </div>
</div>

关于html - 元素未居中。我使用绝对值吗？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27961163/