如何将黑匣子垂直和水平居中？

Question

我试图将黑匣子垂直和水平居中！对于水平居中，我尝试了margin: auto，但它没有使用高分辨率。

我正在努力使我的英雄区域响应。当我减小窗口的宽度时，黑盒子会居中，但是在高宽度时它会保持不变。

另外请帮我水平对齐！还请帮我调整背景！

因此，我的问题是： -

1. 我想垂直和水平居中黑盒！
2. 帮助我调整红色背景以使其响应
＆＃13;
＆＃13;
#header{
	width: 100%;
	height: 100px;
	background: rgba(0,0,0,0.7);
}

#heroarea{
	max-width: 100%;
	height: calc(100vh - 100px);
	background:red;
	position: relative;
}

#hero-intro-box{
	background: rgba(0,0,0,0.8);
	width: 100%;
	max-width: 800px;
	height: auto;
	border: 1px solid white;
	border-radius: 15px;
	padding: 10px;
	padding-bottom: 30px;
	margin: auto;

}

#hero-intro-box h1{
	color: white;
	text-align: center;
	padding-top: 3%;
}

#hero-intro-box p{
	color: white;
	margin: 15px;
	padding: 3%;
	padding-top: 2%;
}

#hero-intro-box #book-now-button{
	height: 50px;
	width: 150px;
	background: rgba(255,255,255,0.5);
	text-align: center;
	border-radius: 15px;
	border: 2px solid darkgrey;
	margin: auto;
}

@media (max-width: 400px) {
	#heroarea{
		height: 600px;
	}

	#hero-intro-box{
		height: auto;
		margin-bottom: 30px;
		position: relative;
		top: 0px;
		bottom: 0px;
	}

}

@media (min-width: 550px) {
	#heroarea{
		height: calc(100vh - 100px);
	}	
}
＆＃13;
    <link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet" />

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

  <div id="heroarea">
      <div class="container">
          <div  id="hero-intro-box" class="ten columns">
              <h1>Enjoy world-class Cuisines</h1>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
              <div id="book-now-button">Book us now!!</div>
          </div>
      </div>
  </div>
＆＃13;
＆＃13;
＆＃13;

Answer 1

对齐元素最可靠的方法是使用CSS3表格布局。有关详细信息，请阅读this article。

在下面的代码中我使用了这种技术。了解它如何在全屏模式下运行，同时调整窗口大小。我还修改了你的背景以适应整个页面大小，将文本集中在“现在预订!!”按钮并使文本对齐（更漂亮）。

body {
  margin: 0;
  }

#header{
	width: 100%;
	height: 100px;
	background: rgba(0,0,0,0.7);
}

#heroarea{
    width: 100%;
	height: calc(100vh - 100px);
	background-color:red;
}

.container {
    display: table;
	width: 100%;  
    height: 100%;  
}

.container > span {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

#hero-intro-box{
	background: rgba(0,0,0,0.8);
	width: 100%;
	max-width: 800px;
	height: auto;
	border: 1px solid white;
	border-radius: 15px;
	padding: 10px 10px 30px 10px;
}

#hero-intro-box h1{
	color: white;
	text-align: center;
	padding-top: 3%;
}

#hero-intro-box p{
	color: white;
	margin: 15px;
	padding: 3%;
	padding-top: 2%;
    text-align: justify;
}

#hero-intro-box #book-now-button{
    display: table;
	height: 50px;
	width: 150px;
	background: rgba(255,255,255,0.5);
	text-align: center;
	border-radius: 15px;
	border: 2px solid darkgrey;
    margin: 0 auto;
}

#book-now-button > span{
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

@media (max-width: 400px) {
	#heroarea{
		height: 600px;
	}

	#hero-intro-box{
		height: auto;
		margin-bottom: 30px;
		position: relative;
		top: 0px;
		bottom: 0px;
	}

}

@media (min-width: 550px) {
	#heroarea{
		height: calc(100vh - 100px);
	}	
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet" />

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

  <div id="heroarea">
      <div class="container">
          <span>
          <div  id="hero-intro-box" class="ten columns">
              <h1>Enjoy world-class Cuisines</h1>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
              <div id="book-now-button"><span>Book us now!!</span></div>
          </div>
          </span>
      </div>
  </div>