Блок формы по центру

221

23 октября 2018, 08:00

Необходимо размещать блок формы по центру экрана, если он влазит, а если он не влазит, то добавлять скролл, но чтоб он был тоже по центру относительно области всей страницы. Подскажите пожалуйста, может кто сталкивался с таким...Что-то вроде центрирования попапа. position: absolute не подходит. Высота формы может меняться в зависимости от контента внутри. Может есть способ какой-то реализовать это с помощью flexbox

* { 
  box-sizing: border-box; 
  
} 
 
body { 
  margin: 0; 
  padding: 0; 
} 
.mainSection { 
  display: flex; 
  flex-flow: column; 
} 
 
.formBlock { 
  padding: 25px 50px; 
  max-width: 500px; 
  background: #f3f3f3; 
  border: 1px solid #000; 
  border-radius: 5px; 
  margin: auto; 
} 
 
.formBlock .inputGroup { 
  margin-bottom: 15px; 
} 
 
.formBlock .inputGroup input { 
  width: 100%; 
} 
 
.formBlock button { 
  width: 100%; 
}

<section class="mainSection"> 
  <div class="formBlock"> 
    <form> 
      <div class="inputGroup"> 
        <input type="text" /> 
      </div> 
 
      <div class="inputGroup"> 
        <input type="text" /> 
      </div> 
 
      <div class="inputGroup"> 
        <input type="text" /> 
      </div> 
 
      <div class="inputGroup"> 
        <button>Submit</button> 
      </div> 
 
    </form> 
  </div> 
 
</section>

Answer 1

Чтобы центрировать по центру экрана, родительский блок должен иметь высоту экрана. Добавление свойства height к .mainSection должно решить Вашу проблему

* { 
  box-sizing: border-box; 
  
} 
 
body { 
  margin: 0; 
  padding: 0; 
} 
.mainSection { 
  height: 100vh; 
  display: flex; 
  flex-flow: column; 
} 
 
.formBlock { 
  padding: 25px 50px; 
  max-width: 500px; 
  background: #f3f3f3; 
  border: 1px solid #000; 
  border-radius: 5px; 
  margin: auto; 
} 
 
.formBlock .inputGroup { 
  margin-bottom: 15px; 
} 
 
.formBlock .inputGroup input { 
  width: 100%; 
} 
 
.formBlock button { 
  width: 100%; 
}

<section class="mainSection"> 
  <div class="formBlock"> 
    <form> 
      <div class="inputGroup"> 
        <input type="text" /> 
      </div> 
 
      <div class="inputGroup"> 
        <input type="text" /> 
      </div> 
 
      <div class="inputGroup"> 
        <input type="text" /> 
      </div> 
       
      <div class="inputGroup"> 
        <input type="text" /> 
      </div> 
       
      <div class="inputGroup"> 
        <input type="text" /> 
      </div> 
       
      <div class="inputGroup"> 
        <input type="text" /> 
      </div> 
       
      <div class="inputGroup"> 
        <input type="text" /> 
      </div> 
 
      <div class="inputGroup"> 
        <button>Submit</button> 
      </div> 
 
    </form> 
  </div> 
 
</section>

Создание сайта для юридической фирмы в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Стрелки в контейнере slick slider?

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

199

HTML

Два инпута с одинаковым именем

Всем приветЕсть два инпута с одинаковым именем

145

HTML

Как сделать смену картинки раз в неделю?

Создаю сайт на конструкторе Tilda, где есть возможность добавить скрипт в формате HTML, JavaScriptМне необходимо чтоб в главном блоке была картинка...

181

HTML

:hover на iOS vs Android

Есть такой код:

207