Как центрировать черный ящик по вертикали и горизонтали?

Я пытаюсь центрировать черный ящик по вертикали и горизонтали! Для горизонтального центрирования я пробовал margin: auto, но он не работает на высоких разрешениях.

Я пытаюсь сделать мою область героя отзывчивой. Когда я уменьшаю ширину окна, черный ящик центрируется, но при большой ширине остается слева.

Также, пожалуйста, помогите мне выровнять его по горизонтали! Пожалуйста, также помогите мне в настройке моего фона!

Следовательно, мои проблемы: -

  1. Я хочу центрировать черный ящик по вертикали и горизонтали!
  2. Помогите мне настроить красный фон, чтобы сделать его отзывчивым

#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);
	}	
}
    <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>


html css skeleton-css-boilerplate
person Community    schedule 17.01.2015    source источник
comment
Что-то вроде этого? ----› Fiddle.   -  person Weafs.py    schedule 17.01.2015
comment
да! Я тоже хочу центрировать его по вертикали!   -  person    schedule 17.01.2015

Ответы (1)


arrow_upward
0
arrow_downward

Самый надежный способ выравнивания элемента — использование макета таблицы CSS3. Для получения дополнительной информации прочитайте эту статью.

В приведенном ниже коде я использовал эту технику. Посмотрите, как он работает в полноэкранном режиме и при изменении размера окна. Я также исправил ваш фон, чтобы он соответствовал полному размеру страницы, выровнял текст по центру в «забронируйте нас сейчас!!» кнопку и сделать текст по ширине (красивее).

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>

person Alexander Dayan    schedule 17.01.2015