Question

div #introbox不居中。我使用容器作为相对和introbox绝对。我将顶部，底部，左侧和右侧设置为0.静态框不是居中。我想把这个内容放在中间体中。

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>

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

找到以下代码。

将左侧位置设为50％并给出包装纸宽度值的左半部分。

#intro-box{
    height: 55vh;
    width: 800px;
    background: rgba(0,0,0,0.74);
    border-radius: 15px;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left:50%;
    margin-left: -400px; /* Half of the wrapper width */
}

如果您正在尝试确切的中心（从顶部和左侧）

，请尝试以下示例

#intro-box{
    height: 55vh;
    width: 800px;
    background: rgba(0,0,0,0.74);
    border-radius: 15px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -400px; /* Half of the wrapper width */
    margin-top: -27.5vh; /* Half of the wrapper height*/
}

JSFIDDLE DEMO

Answer 3

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

但同样，.container的身高应超过或等于#intro-box

Answer 4

有许多方法可以将元素集中在一起：

使用line-height：

你想要居中文字，你知道盒子的大小：

.box { background: red; height: 200px; }
.box span { display:block; text-align: center; line-height: 200px; }

<div class="box">
  <span>Text</span>
</div>

使用transform：

你想要中心任何东西，但不知道盒子的大小：

.box, .box2 { background: red; height: 200px; }
.box span { top: 50%; text-align: center; position: relative; display: block; transform: translateY(-50%) }
.box2 span { top: 50%; left: 50%; position: relative; display: inline-block; transform: translate(-50%, -50%) }

<div class="box">
  <span>Text</span>
</div>

OR WITHOUT TEXT-ALIGN:
<div class="box2">
  <span>Text</span>
</div>

使用绝对位置：

你知道要居中的元素的高度

.box, .box2 { background: red; height: 200px; position: relative; width: 100%; }
.box span { position: absolute; background: green; height: 50px; width: 50px; top: 50%; left: 50%; margin: -25px 0 0 -25px; }

<div class="box">
  <span></span>
</div>

还有更多方法可以解决这个问题。

元素没有来到中心。我绝对使用？

4 个答案: